inline「一」：从 image 底部白边初识 line-he

2017-01-18 本文已影响227人废柴芬格尔

本文首发于个人博客 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 VS 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 >
        ![](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 的内容讲的很仓促，后面会补上，如果文中表达有误，烦请指出，感谢。

参考：