为什么<p>和</p> <h1>的高度大于其内容？

Question

我有一个快速的问题，为什么我的h1和p高度比预期的要大？这是我在说的：

我在做什么错？我已经在这里待了很长时间了，非常感谢您的帮助！ :)我想做的是确保黄色背景仅占用文本所需的高度和宽度。

HTML

<div class="main-content">
            <div class="main-box">
              <div class="kills-container">
                <h1>5600</h1>
              </div>
              <div class="label-container">
                <p>Kills</p>
              </div>
            </div>
          </div>

CSS

.main-content {
  display: flex;
  justify-content: space-between;

  position: absolute;
  top: 120px;
  left: 18.3%;
  width: 80.4%;
  height: 78%;
}

.main-box {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: white;
  height: 120px;
  width: 23%;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
  background-color: green;
}

.kills-container {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  background-color: red;
}

.kills-container h1 {
  margin-left: 10%;
  background-color: yellow;
}

.label-container {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

.label-container p {
  background-color: yellow;
  margin-left: 10%;
}

谢谢！ ：）

Answer 1

放置正文时{margin：0px; padding：0px}只会影响我相信的身体标签。为了针对其他标签进行调整，您可以执行以下操作：

h1 {
    margin:0;
    padding: 0;
}
p {
    marign:0;
    padding:0;
}

Answer 2

我建议将<span>标签嵌套在<h1>（和/或<p>）标签中，然后将line-height和padding CSS属性应用于这些元素分别。有一个很棒的article on CSS-Tricks涵盖了涉及多行文本的类似用例的这项技术，甚至还有指向有效的Codepen示例here的链接。

使用跨度允许您保留浏览器提供的自由元素间距（默认的填充/边距），而不会干扰文本样式。如果您想完全取消这些默认设置，请考虑使用CSS Reset。