增加字体大小时间隙较大

Question

每当我增加字体大小时，在<p>元素和下一个元素之间都会出现这些较大的间隙。谁能告诉我为什么？

.text_box {
  height: 60px;
  width: 252px;
  background-color: grey;
  text-align: center;
  font-size: 55px;
  border-radius: 6px;
}

<p class="text_box"> text </p>
<p> text </p>

Answer 1

这是因为open标签默认具有p，并且margin: 1em 0;等于元素的字体大小（在您的情况下为1em）。为了避免这种情况，请尝试使用一些静态值（例如55px覆盖边距）

Answer 2

浏览器将自动为某些元素注入CSS。

通常，我们使用CSS重置以及标准元素的标准预定义样式来满足我们的需求。

这应该是您在任何项目开始时要做的第一件事。

EM的问题还在于EM是一个基于相对字体大小的相对值。因此，当您增加字体大小时，由于边距设置为EM

，最终会增加边距。

EM将计算1em为字体值。因此，如果您的字体为12pt，则1em单位将等于12pt，因此6em = 72pts，因此边距将增加72pts

• About CSS Resets
• About Browser Styles
• About CSS values & EM

在这种情况下，是引起问题的边距。

.text_box {
  height: 60px;
  width: 252px;
  background-color: grey;
  text-align: center;
  font-size: 55px;
  border-radius: 6px;
}

p {
  margin: 0;
}

<p class="text_box"> text </p>
<p> text </p>

Answer 3

p 具有 margin-block-start 和 margin-block-end 1em； 因此您必须将其覆盖为0em（就像我检查器中的蓝线一样），该空间将消失。