如何摆脱垂直自动添加到 div 的填充？

Question

我觉得这个padding总是加在所有元素上，但是因为这个padding给垂直边距计算带来不便。 我想摆脱这种填充。我该怎么办？

div { background-color:DodgerBlue; }

<div>ABCDE</div>

结果

Answer 1

不确定为什么要这样做，但无论如何，您可以使用 line-height 来消除顶部和底部的额外间距

div {
  background-color: DodgerBlue; 
  line-height: 12px;
}

Demo | Demo 2（含font-size）

Answer 2

由于您的文本小于包含容器，因此您在文本的顶部和底部获得了间距。它实际上不是填充（至少填充 CSS）。

您可以增加文本的行高，使文本占据更多 space 并适合容器，或者您可以增加字体大小来达到同样的效果。

div { 
  background-color:DodgerBlue; 
  line-height: 12px;
}

<div>ABCDE</div>