不同字体对基线的影响？

by jizhen tan

HTML

<div class="demo">
	<span class='line-box'>
		<img src="https://sfault-avatar.b0.upaiyun.com/344/542/3445428434-5631776c183b2_huge256" alt=""><span>Xx</span><span class="a">Xx</span><span class="b">Xx</span><span class="c">Xx</span>
	</span>
</div>

CSS

.demo {
	background: red;

}
.line-box {
	background: blue;
	line-height: 200px;
	font-family: Arial;
	/* 读者可以通过更改font-family的值serif, sans-serif来观察字体对于基线的影响 */
}
.line-box img {
	vertical-align: baseline;
	width: 50px;
}
.line-box span {
	color: yellow;
	vertical-align: text-bottom;
}
.a {
	font-family: Arial;
	background: gray;
}
.b {
	font-family: serif;
	background: black;
}
.c {
	font-family: sans-serif;
	background: green;
}