填充似乎没有意义

Question

我对填充的工作方式有些困惑。下面的代码是我从Free Code Camp获得的（我正在学习HTML）。蓝色框中的填充似乎不是……甚至？

例如，如果使用蓝色框类的元素的底部和右侧的底部和右侧填充有20px，为什么在视觉上似乎底部和右侧填充不是20像素？内容与其边界之间的两个距离明显不同。...发生了什么事？感谢您的时间。

while (temp != NULL)
{
    temp = temp->next;
}

.injected-text {
  margin-bottom: -25px;
  text-align: center;
}

.box {
  border-style: solid;
  border-color: black;
  border-width: 5px;
  text-align: center;
}

.yellow-box {
  background-color: yellow;
  padding: 20px 40px 20px 40px;
}

.red-box {
  background-color: crimson;
  color: #fff;
  padding: 20px 40px 20px 40px;
}

.blue-box {
  background-color: blue;
  color: #fff;
  padding: 40px 20px 20px 40px;
}

Answer 1

我希望这些图片能对您有所帮助。您可以看到与居中文本的其他样式一起使用的填充。

按镀铬的F12键，使检查员熟悉。找到元素后，您可以实时使用样式，以更好地了解它们的工作原理。

Answer 2

哦，实际上是偶数。

我为您创建了一个演示

.injected-text {
  margin-bottom: -25px;
  text-align: center;
}

.box {
  border-style: solid;
  border-color: black;
  border-width: 5px;
  text-align: center;
}

.yellow-box {
  background-color: yellow;
  padding: 20px 40px 20px 40px;
}

.red-box {
  background-color: crimson;
  color: #fff;
  padding: 20px 40px 20px 40px;
}

.blue-box {
  background-color: blue;
  color: #fff;
  padding: 40px 20px 20px 40px;
}

.box > div {
  background-color: #888;
}

<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box"><div>padding: 20px 40px 20px 40px</div></h5>
  <h5 class="box blue-box"><div>padding: 40px 20px 20px 40px</div></h5>
</div>

我认为这可以澄清发生的事情。

主要原因是因为text-align: center带有短文本，这使显示看起来不均匀，但实际上是均匀的。如果您使用的是全角文字，“平整度”将很明显。