margin-top 与#section div 一起移动？

Question

我正在尝试将 class .column 移至 50px 以下，但 margin-top: 50px 与 #section 一起移动。为什么会这样？如何解决？

*{ padding:0; margin:0; }

body { width:100%; font-family:"Source Sans Pro" }
#section { height:400px; background-color:#383838; color:White; }
span { font-size:40px; }
.column { width: 300px; border: 2px solid yellow; margin-left:40px; margin-top:50px; }

<html>
<head>
    <title>Breadth</title>
    <link rel="Stylesheet" type="text/css" href="breadth.css" />
    <link href="fonts.css" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
    <div id="main">
        <div id="section">
            <div class="column">
                <span class="icon icon-cogs"></span>
                <h2>Maecenas lectus sapien</h2>
                <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

您可以将 padding-top: 50px 应用于 #section，而不是将 margin-top 应用于 .column

参考 Mozilla 文档：

If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

阅读有关 Margin Collapsing 的更多详细信息。

*{ padding:0; margin:0; }

body{ width:100%; font-family:"Source Sans Pro" }
#section{height:400px; background-color:#383838; color:White; padding-top: 50px; }
span{  font-size:40px; }
.column{ width: 300px; border: 2px solid yellow; margin-left:40px;}

<html>
<head>
    <title>Breadth</title>
    <link rel="Stylesheet" type="text/css" href="breadth.css" />
    <link href="fonts.css" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
    <div id="main">
        <div id="section">
            <div class="column">
                <span class="icon icon-cogs"></span>
                <h2>Maecenas lectus sapien</h2>
                <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
            </div>
        </div>
    </div>
</body>
</html>

Answer 2

如果你想使用 margin-top 然后将 display:block 给 parent div 和 display:inline-block 给 child div .

见here

阅读更多信息here

已编辑CSS

*{ padding:0; margin:0; }

body{ width:100%; font-family:"Source Sans Pro" }
#section{height:400px; background-color:#383838; color:White;display:block; }
span{  font-size:40px; }
.column{ width: 300px; border: 2px solid yellow; margin-left:40px;  margin-top:50px;display:inline-block;}

Answer 3

您应该像在 fiddle 中一样对 #section 使用 padding-top，并从子项中删除 margin-top。由于 margins 会相互折叠，所以最好不要用它来定位元素。参考这个：Margin goes outside div when border is removed

#section {
   padding-top: 40px;
   ...
}

另一种方法是使用相同的代码，但将 overflow:auto 添加到 #section 中，如下所示：

#section {
   overflow:auto;
   ...
}

还有另一种解决方案，比如在父级上使用边框，但这些更像是 hack，因为我们使用边距进行定位。

*{ padding:0; margin:0; }

body { width:100%; font-family:"Source Sans Pro" }
#section { height:400px; background-color:#383838; color:White; padding-top:50px;}
span { font-size:40px; }
.column { width: 300px; border: 2px solid yellow; margin-left:40px;  }

<html>
<head>
    <title>Breadth</title>
    <link rel="Stylesheet" type="text/css" href="breadth.css" />
    <link href="fonts.css" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
    <div id="main">
        <div id="section">
            <div class="column">
                <span class="icon icon-cogs"></span>
                <h2>Maecenas lectus sapien</h2>
                <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
            </div>
        </div>
    </div>
</body>
</html>

margin-top 与#section div 一起移动？

margin-top moving along with the #section div?

html

css

margin