html - 试图将文字放在图片下方，但文字太低了

Question

我有一堆代码，但与我的问题相关的部分是这样的:

.red-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: red;
  height: 200px;
}

.red-column img {
  width: 90%;
  height: 85%;
}

<div class='red-column'>
  <img src="./assets/images/acapulco.jpg" alt="acapulco">
  <h3>Acapulco</h3>
</div>

基本上，我想要一张图片，下面是描述该图片所代表的城市的文本。

但是，文本显示得太低了:

我怎样才能让文本稍微向上一点，以便在容器中可以看到它？

Answer 1

问题很可能是 h3 元素的默认边距。您可以用一个类覆盖它，并将 margin 设置为 0。

.red-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: red;
  height: 200px;
}

.red-column img {
  width: 90%;
  height: 85%;
}

.title {
  margin: 0;
}

<div class='red-column'>
  <img src="https://placekitten.com/500/500" alt="acapulco">
  <h3 class='title'>Acapulco</h3>
</div>