gpt4 book ai didi

html - 为什么 div 的子元素会改变 body 和 html 之间的边距?

转载 作者:行者123 更新时间:2023-11-27 23:40:31 25 4
gpt4 key购买 nike

为什么将 60px 边距添加到正文内的 p 标签,同时更改 div 与类 * header 的位置.固定位置元素不应该不受页面上其他元素的影响吗?

.header {
position: fixed;
}
.left {
margin-top: 60px;
}

<body>
<div class="header">
Exercise 2.4
</div>
<p class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed magna vitae lorem hendrerit posuere. Nullam ut ex ipsum. Cras volutpat augue in metus tempus ultricies sit amet nec lacus.
</p>
</body>

如果我从 p 标签中删除 left 类,正文和 html 之间的间距会按预期减小到 8 像素。

最佳答案

Collapsing margins !

如果您有两个具有上边距的嵌套元素,则边距将在它们之间共享。也就是说,两个元素的边距值相同。

通常,这只会影响父元素中的第一个子元素,但在这种情况下,浏览器会为您抛出异常,因为第一个元素具有position:fixed,因此它将采用第二个元素。

解决方案:给 .left 一个填充而不是边距。

.header {
position: fixed;
}
.left {
padding-top: 60px;
}
  <div class="header">
Exercise 2.4
</div>
<p class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed magna vitae lorem hendrerit posuere. Nullam ut ex ipsum. Cras volutpat augue in metus tempus ultricies sit amet nec lacus.
</p>

关于html - 为什么 div 的子元素会改变 body 和 html 之间的边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31928337/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com