gpt4 book ai didi

html - 为什么我的边框没有一直延伸到屏幕顶部?

转载 作者:太空宇宙 更新时间:2023-11-03 21:01:45 25 4
gpt4 key购买 nike

我有一个网站,其布局类似于这样:

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<body style="margin:0px">
<div style="border-left: 5px solid black;">
<div><!-- x -->
<div>
<div>
<div style="margin-top: 100px">
fish
</div>
</div>
</div>
</div>
</div>
</body>
</html>

我希望整个页面的左侧都有一个边框。但是,似乎深层嵌套的 div 的 100px 上边距导致其祖先的 border-left 被下推。

出于某种原因,如果我取消注释“x”,一切看起来都很棒。

这是怎么回事?!?!

最佳答案

边距折叠,即使包含元素,所以您的内部 div 的边距会将外部 div 向下推。幸运的是,解决方案很简单:将“overflow: auto”添加到外部 div 的样式(带边框的样式)。

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<body style="margin:0px">
<div style="border-left: 5px solid black; overflow: auto;">
<div><div><div>
<div style="margin-top: 100px">fish</div>
</div></div></div>
</div>
</body>
</html>

关于html - 为什么我的边框没有一直延伸到屏幕顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/722488/

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