CSS消除底部白边。

块级元素独占一行，行级元素依次排列。但块级元素与其他元素上下排列时会在页面上形成一个白边以显示明显的换行。

效果如下：

 这里图片与下面的p元素就形成了一个明显的白色空白区。这里的白边完全是多余部分，属于浏览器默认出现的部分。一般布局时用不上，就需要使用CSS去掉这一部分。

使用页面检查可以看到：

 这一部分是外边距。那么用去掉外边距的方法试试看。

以下为具体步骤。

1.两个p之间：

 简单设置外边距为0。

 图片与p之间：

这里不像两个p之间那样简单就能解决。问题的原因是图片默认是行级元素。具有vertical-align属性，取值默认为baseline。

解决：将img元素设置为块级元素，设置下面的p元素外边距为0即可。

或者设置vertical-align属性为middle，bottom，text-bottom均可。

或为img元素特别设立一个盒子包含img。盒子的字体大小设置为0px。

或调节img元素的父元素的底外边距为负数。

病因详解

vertical-align默认取值为baseline。

vertical设置元素的垂直对齐方式。

具体取值及作用

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
text-bottom	把元素的顶端与父元素字体的顶端对齐
text-top	把元素的底端与父元素字体的底端对齐
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐

本文部分资料参考CSS vertical-align 属性