很多人知道,在CSS中存在Margin合并的现象,比如下代码:
<style>
div {
margin:10px;
height:100px;
background:red;
}
</style>
<body>
<div></div>
<div></div>
</body>
在这里的两个div
之间的margin
值不是20px而是10px,那么需要怎么才能取消这种margin合并的现象呢?有很多个属性可以做到,但是这些属性并没有什么规律,所以只在这里列举出来,不做解释。
- 使用
border
(注意outline
不可以,因为outline
不占位置) display:table
display:flex
padding
overflow:hidden
结语
关于影响margin合并这里没有什么规律,只能通过自己一个一个的去尝试,肯能还有其他文中未提到的属性,可以评论留言。