CSS在盒子模型中保留未知的空间 [英] CSS reserves an unknown space in box model

问题描述

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

  .container {width：300px;填充：10px; font-size：16px;}  

< div class = 容器 > Hello< / div>

（这是javascript中的offsetHeight）是36.但是，当我查看Chrome开发工具中的布局时，高度显示为38.因此，这些2px来自哪里？

解决方案

额外的高度是由 line-height 属性造成的。

line-height 的初始值是正常。

根据规范，告诉浏览器将该值设置为1.2。这为文本提供了一些纵向填充的内容。

要解决该问题，只需添加 line-height：1 添加到您的代码中。

I created a <div> with some text. I set the width and padding of the <div> and the font-size of the text inside it. Below is a snippet summarizing the conflict:

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

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

According to the code, the total height (which is the offsetHeight in javascript) is 36. However, when I look at the layout in Chrome dev tools, the height reads 38. So, where did those 2px come from?

解决方案

The extra height is caused by the line-height property.

The initial value of line-height is normal.

This, according to the spec, tells browsers to set the value up to 1.2. This gives the text a bit of vertical padding inside the line box.

To resolve the issue, just add line-height: 1 to your code.

这篇关于CSS在盒子模型中保留未知的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！