我在为 <figure> 添加边距时遇到问题虽然它嵌套在 <header> 中.
当我申请 margin-top:10px它适用于全身而不是内部 <header>标签。我也在使用 reset.css如果这有帮助的话。
这是大学里的作业，找不到导师的答案。
代码:
<html>
<body>
<header>
<figure></figure>
</header>
</body>
</html>
CSS:
body {
backround-color: #f2f2f2;
margin:0px;
padding:0px;
}
header {
display: block;
position: static;
max-width: 980px;
height: 100px;
background: #1e1e1e;
margin:0px auto 0px auto;
}
header figure {
margin-top:10px; /** when this margin top is added it creates a margin on the full page instead of inside the header**/
margin-left:10px;
max-width:200px;
height:80px;
background:red;
}
最佳答案
您看到的是 collapsing margins .将 overflow:auto 添加到您的 header 以获得您想要的行为:
header {
display: block;
position: static;
max-width: 980px;
height: 100px;
background: #1e1e1e;
margin:0px auto 0px auto;
overflow:auto;
}
关于html - 嵌套 div 在框模型外应用边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25768702/