8.6 清除图片下方的像素空白间隙

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

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

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

<span>123</span><span>234</span>
<span>123</span>   <span>234</span>

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

    <img src="img_ch5/prod4.jpg" alt="Deep Learning">
    <img src="img_ch5/prod4.jpg" alt="Deep Learning">
    <img src="img_ch5/prod4.jpg" alt="Deep Learning">
    <img src="img_ch5/prod4.jpg" alt="Deep Learning">

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

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

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

    <img src="img_ch5/prod4.jpg" alt="Deep Learning"><img src="img_ch5/prod4.jpg" alt="Deep Learning"><img src="img_ch5/prod4.jpg" alt="Deep Learning"><img src="img_ch5/prod4.jpg" alt="Deep Learning">

但是图片之间的行间距依然存在，这个就是我们现在需要解决的问题
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;*/
}