vertical-align: 100%;
vertical-align 百分比是相对 line-height值计算的
<div>
<img src ="images/girl1.jpg" />
</div>
img_1.png
vertical-align 只对内联元素起作用
img 标签没有应用此CSS样式，就默认为使用了vertical-align:baseline;
<div>
<img src ="images/girl1.jpg" />
xxx
</div>
Paste_Image.png
baseline就是参照x字母的“脚底线”
如 img_1 ，没有真正的文本作参考，它就像和一个看不见的文本节点进行了“底对齐”。
又因为文本所占空间的高度大于其可视高度，所以div "容器" 会被撑开一段空间。
解决办法：
- text-align 对块元素不起作用，img {display: block;}
- vertical-align:bottom/middle/top
background-color:#CC4B4B;
}
img {
width: 30%;
vertical-align: top;
}
Paste_Image.png
(把文本节点想成一个本该隐形的节点）
字符上面或下面多占的空间跟line-height的设置有关
设置更小的值 div {line-height: 5px;}
line-height:1.6/160%
设置 {font-size: 0;}, 相当于设置了line-height值
vertical-align:middle;设置对齐的是x的中线，但字符区域视觉上的中线和x的中线不重合，为了完美中对齐，设置font-size:0px; content area 的高度就是0 了，各种线就就重合了
