#书摘 #css #前端
《CSS 世界》深入内联元素之行高 建议通读
1. 对于非替换元素的纯内联元素，其可视高度完全由 line-height 决定。注意这里的措辞—“完全”，什么padding、border 属性对可视高度是没有任何影响的
2. 因此，对于文本这样的纯内联元素，line-height 就是高度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高度。比方说，line-height 设为16px，则一行文字高度是16px，两行就是32px，三行就是 48px，所有浏览器渲染解析都是这个值，1像素都不差。
3. 那如果是替换元素，又或者是块级元素，line-height在其中又扮演什么角色呢？上面推荐的文章里有提到
「行距顾名思义就是两行之间的距离，那么很显然，行高就等于字高加上行距。由于行高可以小于字号，因此行距可以是负值。那么为什么要引出半行距的概念呢？因为在网页上，行距不是完全加在字的上方或下方的，而是均匀分布在字的上下，而半行距就是行距的一半，因此在追求严格的显示效果的场景应当尽量使得行高减去字号的值为偶数，这样它才能作为行距被平分，如果为奇数不能平分，则可能在不同的浏览器中多出来的1px的位置会不同（不一定是在上方或下方）。」
4. 可能是由于CSS开发人员不够专注细致，外加规范设计本身的原因，设计师往往会对各个元素间的距离间隙标注得很清晰。但是，设计师并不是开发人员，他们并没有把网页中无处不在行间距考虑在内，所有与文字相关的间距都是从文字的上边缘和下边缘开始标注的。除非我们全局行高设置为line-height:1，否则这些标注的距离和我们使用的margin间距都是不一致的。
举个例子，假设line-height是1.5，font-size大小是14px，那么我们的半行距大小就是：(14px * 1.5 - 14px) / 2 = 14px * 0.25 = 3.5px。border 以及 line-height 等传统 CSS 属性并没有小数像素的概念，因此，这里的 3.5px 需要取整处理，如果标注的是文字上边距，则向下取整；如果是文字下边距，则向上取整，因为绝大多数的字体在内容区域中都是偏下的。所以，假设设计师标注了文字字形上边缘到图片下边缘间距 20px，则我们实际的margin-top值应该是17px，因为3.5px向下取整是3px。——严谨！
《CSS 世界》深入内联元素之行高 建议通读
1. 对于非替换元素的纯内联元素，其可视高度完全由 line-height 决定。注意这里的措辞—“完全”，什么padding、border 属性对可视高度是没有任何影响的
2. 因此，对于文本这样的纯内联元素，line-height 就是高度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高度。比方说，line-height 设为16px，则一行文字高度是16px，两行就是32px，三行就是 48px，所有浏览器渲染解析都是这个值，1像素都不差。
3. 那如果是替换元素，又或者是块级元素，line-height在其中又扮演什么角色呢？上面推荐的文章里有提到
「行距顾名思义就是两行之间的距离，那么很显然，行高就等于字高加上行距。由于行高可以小于字号，因此行距可以是负值。那么为什么要引出半行距的概念呢？因为在网页上，行距不是完全加在字的上方或下方的，而是均匀分布在字的上下，而半行距就是行距的一半，因此在追求严格的显示效果的场景应当尽量使得行高减去字号的值为偶数，这样它才能作为行距被平分，如果为奇数不能平分，则可能在不同的浏览器中多出来的1px的位置会不同（不一定是在上方或下方）。」
4. 可能是由于CSS开发人员不够专注细致，外加规范设计本身的原因，设计师往往会对各个元素间的距离间隙标注得很清晰。但是，设计师并不是开发人员，他们并没有把网页中无处不在行间距考虑在内，所有与文字相关的间距都是从文字的上边缘和下边缘开始标注的。除非我们全局行高设置为line-height:1，否则这些标注的距离和我们使用的margin间距都是不一致的。
举个例子，假设line-height是1.5，font-size大小是14px，那么我们的半行距大小就是：(14px * 1.5 - 14px) / 2 = 14px * 0.25 = 3.5px。border 以及 line-height 等传统 CSS 属性并没有小数像素的概念，因此，这里的 3.5px 需要取整处理，如果标注的是文字上边距，则向下取整；如果是文字下边距，则向上取整，因为绝大多数的字体在内容区域中都是偏下的。所以，假设设计师标注了文字字形上边缘到图片下边缘间距 20px，则我们实际的margin-top值应该是17px，因为3.5px向下取整是3px。——严谨！
