调整 CSS 中的文本位置

Question

我是编写 HTML 和 CSS 的新手，并且在调整文本位置时遇到问题。

这是我期望看到的：

但这是我实际得到的：

这是我的代码：

#box {
  width: 330px;
  height: 212px;
  margin-top: 1px;
  margin-left: 22.5px;
  background-color: orange;
}

#box topic {
  font-size: var(--text-big);
  font-family: myFirstFont;
  margin-top: 20px;
  margin-top: 20px;
}

<section id=box>
  <topic>XXX</topic>
</section>

Answer 1

您可以将此行添加到您的框类中以对其进行存档。

  border-radius:10px;
  padding: 10px 8px;
  box-sizing: border-box;

#box {
  width: 330px;
  height: 212px;
  margin-top: 1px;
  margin-left: 22.5px;
  background-color: orange;
  border-radius:10px;
  padding: 10px 8px;
  box-sizing: border-box;
}

#box topic {
  font-size: var(--text-big);
  font-family: myFirstFont;
  margin-top: 20px;
  margin-top: 20px;
}

<section id="box">
  <topic>XXX</topic>
</section>