关于设计稿与实际开发中的间距

设计稿标注的图文、文字间距一般是不包含文字自身的行高的，因此如果我们根据设计稿直接去设置 margin 以及 padding 势必会造成间距、留白过大

原因所在正是这个隐匿行高在作祟，如果行高设置为 1 或者 1em，则依据标注设置间距不会有任何问题，但是如果行高不为 1 或者 1em，那么问题就来了

由于行高超越 font-size，会产生内联元素的上下留白空间（设计稿实际标注间距又是从文字本身出发），我们需要重新计算间距来排除 line-height 产生的额外间距

上半行距 = Math.floor(( line-height * font-size - font-size ) / 2)

下半行距 = Math.ceil(( line-height * font-size - font-size ) / 2)

如果标注的是上边距，则实际 margin-top 需要减去上半行距，下边距同理，举个栗子：

设计稿标注：

则我们实际设置的 margin-top 为： 20 - Math.floor( ( 14 * 1.5 ) - 14 ) / 2 = 20 - 3 = 17px

内联元素的对齐方式

基于内联元素的文字基线进行对齐，条件：

以上规则在内联元素对齐时非常有用

内联元素所在的行框盒子前面都有一个隐藏的“幽灵空白节点”，此节点依据 font-size、line-height 等属性撑起当前行的最小高度（考虑对齐问题时千万不要把他忘了）
内联元素对齐：
1. 图片/inline-block 元素默认与内联元素的默认对齐方式为：基于基线对齐（加上 line-height 的作用，会导致当前行实际高度超过 line-height 高度）
2. 基于第一条规则，组内对齐之后，元素们形成一个整体，此时这个整体的上边缘再与父节点的顶部进行对齐（正是基于这个机制，很多场景下行内会出现莫名其妙的空白行高）

在处理内联元素对齐时，基本可以通过以下两种方式来规避“空白幽灵节点”带来的度面影响：