vertical-align 和 line-height

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 了，各种线就就重合了

• 参考
• 关于字母x
• inline-box