本文首发于个人博客 http://www.lijundong.com/image-and-line-height/
今天在做一个静态页面时，图片底部出现一条 3px 高度的白边，既不是 margin 也不是 padding，找了好久没能解决，后来才发现与 line-height 相关，问题解决后查缺补漏，这里作下笔记。
解决问题之前需要理清楚几个概念，基线、line-height、vertical-align、inline 元素。
基线(baseline)
基线(Baseline) 是字体排印学中的概念，指的是多数字母排列的基准线，大多字母都沿着红色基线排列，举个例子辅助理解
图中 xHh 字母的下边缘红线就是基线的所在，那么有没有一个特定的条件来定义基线呢？这里有个概念可供参考
字母x的下边缘(线)就是基线的所在。
这里又引出了 x-height 的概念，此处不表。
line-height
关于 line-height 如何定义的讨论，有说法是两条基线之间的距离，看到这个结论我首先想到第一行的行高如何处理，后来去找了资料，发现两条基线之间的距离即是 line-height 这样的结论并不准确。
关于 line-height 的定义，MDN 阐述如下：
On block level elements, the line-height property specifies the minimum height of line boxes within the element.
On non-replaced inline elements, line-height specifies the height that is used to calculate line box height.即
block 元素中， line-height 的值等于元素中高度最低的行框(line box) 的高度值。
在 non-replaced inline 元素中，line-height 的值等于行框(line box) 的高度值。
**注：**
**replaced element 对比 non-replaced element**- replaced element: 例如 img、video、canvas 此类渲染出的内容引用外部的元素
- non-replaced element: 渲染自身的 content例如
<a href="lijundong.com">Leeon Blog</a>inline(内联) 元素
HTML5 中的常见 inline 元素如下：
- inline：span、strong、em
- inline-block：input、button、textarea、select、img
vertical-align
vertical-align 作用于 inline 元素 以及 table-cell 元素，还有
::first-letter::first-line属性分类：
适用于 inline 元素的属性：
/* keyword values */
vertical-align: baseline; /*基于基线对齐*/
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;/* <length> values */
vertical-align: 10em;
vertical-align: 4px;/* <percentage> values */
vertical-align: 20%;/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;适用于 table-cell 的属性：
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;回到问题
问题代码示例如下，
<style >* {padding: 0;margin: 0;}body {background-color: #ccc;}img {width: 100px;}div ,p {font-size: 100px;background-color: #fff;}
</style>
<body><div ><img src="headpic.png"></div>
</body>
代码效果图如下，红框圈出部分为出现的白条
通过对代码稍作修改可以轻松看出问题所在，实图如下
有了上面的铺垫，现在回头看遇到的问题，就很简单了，究其原委，首先 img 元素默认对齐方式为
vertical-align: baseline;问题找到了，对症下药可得出下面的解决方案：
- 根本上消除 img 的对齐方式 —— 块状化：
img { display: block;
}- 更改 img 对齐方式，以下三种均可
img {vertical-align: top;vertical-align: middle;vertical-align: bottom;
}- 更改行高，行高是两条 baseline 之间的距离，因此可以暴力的让行高消失
{ line-height: 0;/* font-size: 0; 当 line-height 使用数值、百分比或者 rem 定义时也可用这种方式，因为 line-height 参照的是 font-size 的值*/
}总结
遇到问题多多求证，即便是很常见的问题也会挖出大学问，在求证的过程中也不能尽用拿来主义，多参考 w3c 和 MDN 的文档。
写的过程中，修修补补了好几回，关于 vertical-align 的内容讲的很仓促，后面会补上，如果文中表达有误，烦请指出，感谢。
参考：
- CSS深入理解之vertical-align
- CSS Baseline: The Good, The Bad And The Ugly
- 基线 wiki
- How CSS line-height is measured?
- Understanding the CSS box model
- Inline elements and line-height
