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 的内容讲的很仓促，后面会补上，如果文中表达有误，烦请指出，感谢。

参考：

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