CSS的inline、inline-block

CSS inline、inline-block

本文将介绍内联布局中，内容的布局方式及相关原理。

inline box 与 line box

对于行框、内联框，标准文档中有个很经典的图。

附上自己的一段代码，方便理解。

<div style="width: 200px; margin: auto;">
	这是一段代码，又长又好看的代码。
	<span style="color: red">这是inline box</span>
	这又是一段代码，又长又好看的代码。
</div>

上图中：蓝色区域代表inline box，表示一个行内的元素框；红色区域代表line box，每一行的区域都可以表示line box；绿色区域代表root inline box，表示行内区域内不被元素包裹的内容，这里表示没有任何元素包裹的文字。

baseline基线

在内联模型中，涉及到垂直方向的对齐，都离不开基线的定义。我们通常所说的基线：就是英文字母’x’的下边缘线。(如下图baseline红线)

其中涉及到一个概念叫做“x-height”，所指的就是字母’x’的高度。也就是median(中线)与基线之间的距离。

值得注意的是，最常见的vertical-align: middle，所指示的位置不是median，而是1/2 x-height的高度。

对于inline-block元素来说，它的基线取决于元素本身的特性，在该元素中没有行内子元素（注意是DOM树的子元素，有块子元素不算或者块子元素中有行元素这个行元素算）的时候或者overflow不为visible，该inline-block的基线为margin-bottom的下边界。否则，以该元素中最后一个行框子元素的基线为该元素的基线。

如下图：第一个inline-block元素没有行内子元素，它的基线为margin-bottom的下边界；第二个有行内元素（内容），基线以x字母正常基线。vertical-align默认以baseline基线对齐，出现下图效果。

而当两个inline-block都没有行内元素时，就会出现另外一种结果了，如下图所示：

vertical-align

line-height行高的定义就是两基线的间距；vertical-align的默认值就是基线。这两者之间有着密切的关系。

只有一个元素属于inline或是inline-block，vertical-align才会起作用。

这里需要引申另外一个概念：行替换元素。替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。行替换元素即：浏览器显示的内容，在通过控制台审查元素时，看不到实际内容的行内元素。比如图片，呈现出来就是对应src的图片，但是审查元素下只有标签，看不到图片（只有一个url）。

行替换元素在实际中会产生出现一段空白的问题，如下图所示：

其实这种情况跟上面两个inline-block的情况一样，本质上，是vertical-align和line-height一起产生的影响，那么有什么方法解决呢？

• 方法一： 让vertical-align失效

前面也说了，vertical-align对块级元素无感，所以当没有后面的’zhaodao88.com’文字时，只要让图片display设置为block就可以了。

img { display: block; }

• 使用其他vertical-align值（适合后面有跟文字的场景）

只要不是默认值: baseline，其他都是可以的:bottom…

• font-size控制line-height（适合后面没有跟文字的场景，毕竟font-size会影响字体大小）

下面的空隙高度，实际上是文字计算后的行高值和字母x下边缘的距离。因此，只要行高足够小，实际文字占据的高度的底部就会在x的上面，下面没有了高度区域支撑，自然，图片就会有容器底边贴合在一起了。而line-height又受到font-size的影响，因此只需要在父元素上将font-size设置为0就可。

div { font-size: 0; }

垂直居中

如果想要垂直居中，第一反应利用vertical-align: middle来实现。啪啪啪一段代码来看看效果

div { line-height: 85px; }
img { vertical-align: middle; }

这就是传说中的居中吗？上下间距相差太大了吧？！！
毫无疑问，这又是vertical_align和line-height搞的鬼。

因为middle是相对于x字符的中心点来说的，而实际上字符内容区域是并不是x的高度（比方说图上的h就比x高出一截）就是这一截导致了这种情况。

因此，要想完全垂直居中，回顾上面消除空白段的方法。

1、可以使用设置font-size: 0的方式（适合后面没有跟文字的场景，毕竟font-size会影响字体大小）来实现真正意义上的垂直居中。

2、如果既要消除图片跟文字之间的空隙，又要跟文字，那么文字可以使用一个行内标签包裹：

<style>
div {
	background-color: #cccccc;
	margin: 100px 300px 0;
	line-height: 85px;
	height: 85px;
	font-size: 0;
}
img {
	vertical-align: middle;
}
span {
	vertical-align: middle;
	font-size: 16px;
}
</style>
<div><img src="https://profile.csdnimg.cn/3/3/0/3_wuchen092832">
	<span style="background-color: #ffffff">zhaodao88.com</span>
</div>

3、使用一个空的行内标签。将空标签的line-height设为div的高度。

<style>
	div {
		background-color: #cccccc;
		margin: 100px 300px 0;
		height: 85px;
		font-size: 0;
	}
	img {
		vertical-align: middle;
	}
	span {
		vertical-align: middle;
		font-size: 16px;
	}
	.none {
		line-height: 85px;
	}
</style>
<div><img src="https://profile.csdnimg.cn/3/3/0/3_wuchen092832">
	<span style="background-color: #ffffff">zhaodao88.com</span>
	<span class="none"></span>
</div>

参考

https://www.w3.org/TR/2020/WD-css-inline-3-20200618

https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height