外边距叠加问题

     今天在阅读精通CSS的过程中，对外边距的叠加问题产生了好奇，所以这里分享下。

来看一段代码：

div的外边距是10px，里面段落的外边距是20px，那么实际显示是什么样的呢？

使用chrome浏览器和firefox和IE浏览器，都会显示如上图所示的样式。

这里发生了两个情况：

1.段落的20px顶外边距和底外边距和div的10px外边距叠加，形成一个20px的垂直外边距。

               

2.这些外边距不是被div包围，而是突出到div的顶部和底部的外边——这是由于块级子元素的元素计算其高度的方式造成的。

 解决这样的外边距叠加问题，有一个简单的方案：

通过添加一个垂直边框或内边距，外边距就不在叠加了，而且元素的高度就是他包含的子元素的顶部和底部外边距边缘之间的距离。

 

通过添加padding或者border，实现的样式如下图：

 

 

外边距叠加的大多数问题，可以通过添加一点内边距或与元素背景颜色相同的小边框来修复。