CSS外边距合并DEMO

/*本页面使用了reset*/ * {margin:0; padding:0;}

垂直外边距最大值为20px

1. 一个元素出现在另一个元素上面时

margin-bottom:10px;
margin-top:20px;

2. 一个元素包含另一个元素时(没有内边距或边框把它们的外边距分开)

打酱油的,加上颜色方便测量 - margin:0;
margin-top:20px;
margin-top:10px; padding:0 10px 10px;

3. 一个没有内边距和边框的空元素,它的上、下外边距相遇也会合并

打酱油的 1 - margin:0;

下面的空div - margin:10px 0 20px 0;
打酱油的 2 - margin:0;

4. 上述3中空元素的外边距遇到另一个元素的外边距,3个外边距发生合并

margin-bottom:5px;

下面的空div - margin:10px 0 20px 0;
打酱油的 1 - margin:0;

5. 上述4的扩展:4个外边距相遇

margin-bottom:5px;

下面的空div - margin:10px 0 20px 0;
margin-top:15px;

6. 上述4的扩展:n个空div

margin-bottom:5px;

下面有 4 个空div - margin:10px 0 20px 0;
打酱油的 1 - margin:0;
说明:
兼容性:本例在各浏览器中表现一致,合并后的外边距均为最大值20px。
原文:《详解css外边距合并》。
更多相关: css外边距合并css spritescss font属性css background属性css命名规则
欢迎光临 mming 交流更多前端相关知识