Question

我想在菜单中运行一个按钮，但每次将margin-top属性设置为10时，父级也会向下移动10个像素...

这是我的代码：

nav {
    width: 100%;
    height: 125px;
    background-color: #fff;
    border: 0.1px solid #fff;
    -webkit-box-shadow: 0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    box-shadow:         0px -3px 7px -1px rgba(50, 50, 50, 0.75);
}

#menuknop {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-image: url(../img/menuknopje.png);
    background-repeat: no-repeat;
    z-index: 101;
    position: relative;
    margin-top: 10px;
    margin-right:5%;
    margin-left:95%
}

我的HTML，非常简单“：

    <nav>
    <div id='menuknop'></div>
</nav>

有谁知道如何解决这个问题？

Answer 1

在#menuknop

中使用导航中的填充而不是边距

nav {
    width: 100%;
    height: 125px;
    background-color: #fff;
    border: 0.1px solid #fff;
    padding-top:10px;
    -webkit-box-shadow: 0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    box-shadow:         0px -3px 7px -1px rgba(50, 50, 50, 0.75);
}

#menuknop {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-image: url(../img/menuknopje.png);
    background-repeat: no-repeat;
    z-index: 101;
    position: relative;
    margin-right:5%;
    margin-left:95%
}

但我不知道这种行为的正确原因，如果有人知道请让我知道

Answer 2

这是由margin collapsing引起的。至少有三种方法可以防止保证金崩溃：

添加overflow: hidden
添加边框
添加填充

设置其中任何一项都可以防止元素的边距与其第一个子元素的边缘一起崩溃。

解决方案1：你已经有了一个0.1px的边框，如果你可以将它改为1px，问题就会消失（看起来似乎忽略了0.1px边框）：

nav {
    width: 100%;
    height: 125px;
    background-color: #FFF;
    border: 1px solid #FFF;
    -webkit-box-shadow: 0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    box-shadow:         0px -3px 7px -1px rgba(50, 50, 50, 0.75);
}
#menuknop {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-color: orange;
    background-repeat: no-repeat;
    z-index: 101;
    position: relative;
    margin-top: 10px;
    margin-right: 5%;
    margin-left: 95%
}

<nav>
    <div id='menuknop'></div>
</nav>

解决方案2：添加一个隐藏溢出的（伪）元素：

nav {
    width: 100%;
    height: 125px;
    background-color: #FFF;
    -webkit-box-shadow: 0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px -3px 7px -1px rgba(50, 50, 50, 0.75);
    box-shadow:         0px -3px 7px -1px rgba(50, 50, 50, 0.75);
}
nav:before {
    content: "";
    display: block;
    overflow: hidden;
}
#menuknop {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-color: orange;
    background-repeat: no-repeat;
    z-index: 101;
    position: relative;
    margin-top: 10px;
    margin-right: 5%;
    margin-left: 95%
}

<nav>
    <div id='menuknop'></div>
</nav>

Answer 3

它的margin collapsing - 记录和预期的CSS行为，用于布置最初设计的文本流。

要在不需要时防止此行为，有以下几种选择：

向父元素添加一些顶部填充或顶部边框。它不必是可见的，它应该是非零的。在大多数情况下，border-top: transparent solid .01px应该足够了。
让父元素建立新的block formatting context。通常是通过设置overflow:hidden来完成，但这有一些限制。
添加一个空（伪）元素，在子元素之前建立块格式化上下文。受欢迎的micro clearfix hack。
从块流中获取子元素，例如通过float或将其display更改为inline-block（如对问题的评论中所建议的那样）。

选择符合您要求的内容:)

Answer 4

使用翻译

#menuknop {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-image: url(../img/menuknopje.png);
    background-repeat: no-repeat;
    z-index: 101;
    position: relative;
    transform: translate3d(10px,0,0);
    margin-right:5%;
    margin-left:95%
}

CSS Margin-top也会影响父级

4 个答案: