CSS深入浅出之IFC

1. font-size指的是 em-square，一个 em-square，它是用来盛放字符的金属容器。这个 em-square 一般被设定为宽高均为 1000 相对单位，不过也可以是 1024、2048 相对单位
2. line-height 是内联元素实际占地高度。
   当两个不同字体的内联元素出现在一起，父元素的高度有可能变大，因为每个字体的baseline不同，造成垂直方向上偏差。
3. font-size:100px;实际高度并不是100px
4. vertical-align: top /middle/ bottom/ text-top、 text-bottom 等属性都不靠谱，未必能达到垂直居中的效果，因为字体不相同。
5. 图片下面有空隙，造成的原因是图片的baseline与父元素默认的baseline不同。
   • vertical-align：top(推荐)
   • img{display: block}(可能会有BUG)
   • font-size: 0 (不要使用)

6. inline-block 元素对不齐 ——无解 —— 用 flex 或 float

7. inline-block 有空隙 ——用 flex 或 float

8. inline-block 元素会有两个无法避免问题：

   • 元素之间的空隙
   • 元素之间的对齐

更多细节请参考

---

• ← Previous Post
• Next Post →