Heim > Fragen und Antworten > Hauptteil
P粉5210131232023-08-22 17:46:33
一个不会对视觉产生影响的禁用外边距折叠的巧妙技巧,据我所知,是将父元素的内边距设置为0.05px
:
.parentClass { padding: 0.05px; }
内边距不再为0,因此不会发生折叠,但同时内边距足够小,视觉上会被四舍五入为0。
如果需要其他内边距,则只在不希望发生外边距折叠的“方向”上应用内边距,例如padding-top: 0.05px;
。
工作示例:
.noCollapse {
padding: 0.05px;
}
.parent {
background-color: red;
width: 150px;
}
.children {
margin-top: 50px;
background-color: lime;
width: 100px;
height: 100px;
}
<h3>边框折叠</h3>
<div class="parent">
<div class="children">
</div>
</div>
<h3>无边框折叠</h3>
<div class="parent noCollapse">
<div class="children">
</div>
</div>
编辑:将值从0.1
更改为0.05
。正如克里斯·摩根在下面的评论中提到的,并且从这个小测试中可以看出,似乎Firefox确实考虑了0.1px
的内边距。不过,0.05px
似乎是有效的。
P粉5886603992023-08-22 16:36:44
有两种主要的外边距折叠:
只有在后一种情况下,使用填充或边框才能防止折叠。此外,任何不同于其默认值(visible
)的overflow
属性应用于父元素都会防止折叠。因此,overflow: auto
和overflow: hidden
将产生相同的效果。也许使用hidden
时唯一的区别是如果父元素具有固定高度,则会意外隐藏内容。
其他一些应用于父元素后可以帮助修复此行为的属性有:
float: left / right
position: absolute
display: flex / grid
您可以在此处测试它们:http://jsfiddle.net/XB9wX/1/。
我应该补充说,像往常一样,Internet Explorer是个例外。具体来说,在IE 7中,当为父元素指定某种布局(例如width
)时,外边距不会折叠。
来源:Sitepoint的文章折叠外边距