为何示例中.container元素高度为4px而非0px？

问题分析 #

先看你提供的代码：

CSS 代码 #

* {
    margin: 0;
    padding: 0;
}
.container {
    position: absolute;
    font-size: 12px;
    font-weight: 400;
    line-height: 0;
}
.child {
    display: inline-block;
    width: 0;
    height: 0;
}

HTML 代码 #

<div class="container">
  <div class="child"></div>
</div>

你疑惑的点在于：为什么.container高度是4px，但把.child的display改成inline或block后，容器高度就变成0了？

原因很明确，这是inline-block元素的基线对齐规则导致的：

• 当元素设为inline-block时，浏览器默认会让它和父元素的基线对齐。哪怕这个元素宽高都是0，浏览器也会为它保留基线下方的最小占位空间（不同浏览器这个默认值大多是4px左右），这就把.container撑出了4px的高度。
• 改成block时，这个宽高为0的块级元素完全不占据垂直空间，父元素自然没有高度。
• 改成inline时，空的行内元素在父元素line-height:0的设定下，不会触发基线对齐的额外占位，所以父元素高度也变成0。

内容的提问来源于stack exchange，提问作者Jianxin Yang