Question

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

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

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

根据代码，总高度（javascript中的offsetHeight）是36.但是，当我查看Chrome开发工具中的布局时，高度为38.那么，那些2px来自哪里？< / p>

Answer 1

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

line-height的初始值为normal。

这个according to the spec告诉浏览器将值设置为1.2。这会在文本框中为文本提供一些垂直填充。

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

Answer 2

浏览器实现文本的默认行高。因此，在这种情况下，文本下方和上方有1个像素。您可以通过设置let data = [ {"id":"10035","occupation":null,"state":"FL"}, {"id":"10035","occupation":"doctor","state":null}, {"id":"10035","occupation":null,"state":null}, ]; let result = data[0]; data.forEach(obj=> { // iterate through all objects in array for(key in obj) // iterate through all properties of objects if(obj[key]) result[key] = obj[key]; // if not null, assign to final result }); console.log(result);

来更改此设置

CSS在盒子模型中保留未知空间

2 个答案: