CSS在盒子模型中保留一个未知空间答案

【问题标题】：CSS reserves an unknown space in box modelCSS在盒子模型中保留一个未知空间
【发布时间】：2017-07-16 19:21:25
【问题描述】：

我创建了一个带有一些文字的<div>。我设置了<div> 的宽度和填充以及其中文本的字体大小。下面是一个总结冲突的 sn-p：

.container {
  width:     300px;
  padding:   10px;
  font-size: 16px;
}

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

根据代码，总高度（即javascript中的offsetHeight）为36。但是，当我在Chrome开发工具中查看布局时，高度显示为38。那么，这2px是从哪里来的？

【问题讨论】：

【解决方案1】：

额外的高度是由line-height 属性引起的。

line-height的初始值为normal。

according to the spec 告诉浏览器将值设置为 1.2。这使文本在行框中有一点垂直填充。

要解决此问题，只需将line-height: 1 添加到您的代码中即可。

【讨论】：

【解决方案2】：

浏览器实现了文本的默认行高。所以在这种情况下，文本上下各有 1 个像素。你可以通过设置line-height: 16px;来改变它

【讨论】：