inline「一」：从 image 底部白边初识 line-height
**本文首发于个人博客 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，更多内容可以参见 MDN
属性分类：
适用于 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;，这就导致了，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 的内容讲的很仓促，后面会补上，如果文中表达有误，烦请指出，感谢。
参考：
