我试图将 .column 类移动到 50px 以下，但是 margin-top: 50px 与 一起移动#节。为什么会这样？如何解决？
*{ 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>最佳答案
您可以将 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>关于html - margin-top 与#section div 一起移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37270087/