本文共 1375 字，大约阅读时间需要 4 分钟。

（1）不讲理的方法：直接改变.demo的高度，让其和图片的高度一致就不会出现控股白间隙了，但是不推荐使用，因为这样对我们了解空白间隙的产生无意义。

*先弄明白间隙产生的原因：img是行级块（inline-block）元素，行级元素都有文本类元素的特点，文本类元素一般都有1.2em的行间距，如下图。

行级元素（行级块元素）： 1)有默认的行高：line-height：（1-1.2em） 2)有默认的垂直方向对齐方式 3)能被文字分隔符（空格或者回车）分割： a)加空格表示文字分隔，如下代码第二行会显示一个空格（实际上有三个空格）。

123234123   234

b)如下的代码，图片间将都会有6px的像素空白（回车造成的）

图片之间以及下方均有空白间隙

图片调大之后可以看到之间的上下的间隙

回车去掉，图片左右的空白间隙就没了

但是图片之间的行间距依然存在，这个就是我们现在需要解决的问题

4）文本类元素在一行里面底对齐，包含图片和文字 （文字默认底对齐，可以通过vertical-align调整其不对齐）

img{
       width: 250px;    height:250px;    border:solid 1px black;    vertical-align: bottom;}

（2） 回到题目，三种方法解决这个问题：

1）给img元素添加vertical-align

img{
       width: 250px;    height:250px;    border:solid 1px black;    vertical-align: bottom;}

2）给img父级元素设置行高：line-height：1ex（em以及ex单位依据字体在文件中的不同元素上有所不同。em仅仅是字体大小。在2英寸的元素中1em就是2英寸。 利用em表达大小的话，就代表它们是与字体大小相关。如果使用者有较大的字体(例如在大屏幕上)，或者是较小的字体(例如手持装置)，它的大小会保持比例。 以下编码text-indent: 1.5em以及margin: 1em在CSS里是非常常见的。

单位ex很少被使用。它的目的是表达必须与字体的x-高度有关的大小。x-高度大致是指小写字母的高度，例如a, c, m,或者o。 有一样大小的字体(所以也有一样的em)可能在它们的小写字母大小上有较大的不同，而当有些图象必须要符合x-高度时，ex单位是可以使用的）

.demo{
       border: 1px solid #000;    line-height: 1ex;}img{
       width: 250px;    height:250px;    border:solid 1px black;    /*vertical-align: bottom;*/}

3)将img元素类型改变为块级元素：display：block，此时img会独占一行

img{
       width: 250px;    height:250px;    border:solid 1px black;    display: block;    /*vertical-align: bottom;*/}

转载地址：http://gatzi.baihongyu.com/