内联元素

内敛元素分 可替换 和不可替换两种类型来讨论。

内联元素的高度

对于非替换元素，其高度是由line-height属性定义的。一行的高度就是line-height * 1；n行的高度就是line-height * n。

对于替换元素，如果没有显示指定，其高度由元素本身决定。

盒模型的一些内容

对于内联元素，在垂直方向上，margin/border/padding不起作用（不会影响现有布局，但是实际存在），水平方向的margin/border/padding有效。

认识 css中的单位 ex

在css中，1ex等于小写字母x的高度。这个高度一般叫做x-height。 ex的一个应用：让图标总是跟文字垂直居中。

.icon {
    display: inline-block;
    width: 24px;
    height: 1ex;
    background: url(1.png) no-repeat center;
}

内联元素与行高、字体和排版

实际上字体设计和排版也是一本学问。这里面有很多概念，例如baseline，em-box，median等。

内联元素的line-height

line-height： 行高，也叫行距。具体是指相邻两行文字的baseline之间的距离。 em-box： em-box是一个比较虚的概念，其大小是 1em。 content area：在字体设计中，content-area的高度是根据字体不同而变化的。通常情况下，会比字体的高度（em-box）大一些。但是宋体字中，content-area 和 em-box的大小是一致的。

那么知道这三个概念有什么作用呢？

作为前端，从设计师那拿到的设计图，获取的标注一般都是从上一行文字到下一行文字之间的距离。而实际上这和line-height的概念并不等同。如果我们要还原设计图，那么就需要知道如何做相应的转换。

line-height与“垂直居中”

通过line-heiht设置的垂直居中并不是真正意义上的垂直居中，而是稍微靠下一些（大概也就1像素的差距，所以视觉上一般不容易察觉）。

<style>
	p{
		margin:0;padding: 0;
		height: 36px;
		line-height: 36px;
		font-size: 24px;
	}
</style>
<p style="font-family:cursive;background: tomato;"> A clone is a copy </p>
<p style="font-family:fantasy;background:yellowgreen;"> A clone is a copy </p>

上例中，两个p标签高度和line-height一致，只有字体不一致。