未从父元素实现保证金

问题描述 投票:0回答:1

我在玩CSS:

<body>
<div style="background-color:lightblue; border : 1px solid black">
<div style= "margin-bottom : 20px;">This is some text in a div element</div>
</div>
</body>

此代码使div标签与子div底部相距20像素。

<body>
<div style="background-color:lightblue">
<div style= "margin-bottom : 20px;">This is some text in a div element</div>
</div>
</body>

但是如果删除了border属性,则子div不会从父div处获取底边距,而是从html标签开始。为什么会这样?

html css border margin
1个回答
1
投票
这是由于利润下降。保证金倒塌只是意味着任何元素紧随另一个元素之后或内部另一个元素的内部或最后一个元素,然后与其他元素接触的边距(顶部或底部)将在另一个元素的边距内部塌陷,简单地,较大的保证金将获胜。在这种情况下,孩子的下边距与父母的边距一起折叠,这全都导致了孩子没有边距但父母的情况,但是一旦应用边框,孩子的边距就被禁止塌陷由于边界位于两者之间,因此与父代在一起。
© www.soinside.com 2019 - 2024. All rights reserved.