CSS 中上下 margin 到底重不重叠?

作者:vkvi 来源:千一网络(原创) 日期:2021-7-16

如果没有浮动,则重叠,示例:

<style type="text/css">
ul { margin:0; padding:0; width:100px; overflow:hidden; }
ul li { margin:20px 0; padding:0; width:100px; height:20px; background:#f00; list-style:none; }
</style>

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

效果:

CSS 中上下 margin 到底重不重叠?

如上,可以看出,虽然 li 上下 margin 是 20px,但是间隔并不是 20px + 20px,而就只有 20px,说明它们重叠了。

现在给 li 加上 float:left;,效果如下:

CSS 中上下 margin 到底重不重叠?

 如上间隔是 20px + 20px


相关文章