H1 标签将 div 向下推
发布于2021-10-27 02:44 阅读(129) 评论(0) 点赞(12) 收藏(3)
您好，我有一个问题，我无法在网上找到一个很好的解释答案。
当我在第二个 div 中键入一些带有 h1 标签的文本时，我有两个 div，它会将 div 向下推。即使我使边距顶部更大。
我的代码：
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/normalize" rel="stylesheet" />
<style>
#one {
width: 100%;
height: 50px;
background-color: red
}
#two {
width: 100%;
height: 150px;
background-color: blue
}
h1 {
margin: 50px 0;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="two">
<h1>Hoi</h1>
</div>
</body>
</html>
示例图片
解决方案
两个或多个（或父子）框的相邻边距可以组合形成单个边距，这种组合称为折叠边距。
W3C 参考：https : //www.w3.org/TR/CSS2/box.html#collapsing-margins
任何与应用于父级的默认值（可见）不同的溢出值都将防止崩溃。
使用overflow: hidden在div #two会解决这个问题。
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/213128/73f88c9718db38bb8226/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力