CSS布局实践：将文本内容置于带边框元素的下方

在网页设计中，我们经常需要将图片或视觉元素与描述性文本结合展示。一个常见的布局需求是将文本放置在带有特定边框的图片下方，使其看起来像是图片的额外说明，而不是图片本身的一部分。然而，由于html结构或css样式应用不当，文本有时会意外地出现在边框内部，这与设计意图相悖。

问题分析：为何文本被包含在边框内

最初的布局尝试中，文本元素（span.txt）被直接嵌套在一个带有边框（border）、宽度（width）和高度（height）的div.image容器内部。div.image被设计为显示图片，但同时其边框也包围了其所有子内容，包括了文本。

以下是原始的HTML和CSS结构示例：

原始CSS:

.title {
    text-align: center;
    font-size:36px;
    font-weight: bolder;
    color: #1F2937;
    margin-top: 45px;
}

.second_container {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    padding: 30px 0px;
    gap:32px; 
}

.image { /* 问题所在：边框和尺寸应用于此容器，且包含文本 */
    border: 4px solid dodgerblue;
    border-radius: 8px;
    width: 150px;
    height: 150px;
    text-align: center;
}

span.txt {
    font-size: 18px;
}

原始HTML:

立即学习“前端免费学习笔记（深入）”；

京点点

京东AIGC内容生成平台

下载

<div class="title">
    Some random Information.
</div>
<div class="second_container">
    <div class="image"> <!-- 此div带有边框，且包含了span.txt -->
        <div class="img"></div>
        <span class="txt">This is some subtext under an illustration
            or image.
        </span>
    </div>
    <div class="image">
        <div class="img"></div>
        <span class="txt">This is some subtext under an illustration
            or image.
        </span>
    </div>
    <div class="image">
        <div class="img"></div>
        <span class="txt">This is some subtext under an illustration
            or image.
        </span>
    </div>
    <div class="image">
        <div class="img"></div>
        <span class="txt">This is some subtext under an illustration
            or image.
        </span>
    </div>
</div>

在这种结构下，span.txt作为div.image的子元素，自然会被div.image的边框所包围。如果div.image的height属性被固定，文本甚至可能因为空间不足而被截断或溢出，无法实现文本在边框外部下方显示的效果。

解决方案：调整HTML结构与CSS样式

解决此问题的核心思路是明确边框的职责。边框应该应用于实际的视觉内容（例如图片本身或其占位符），而不是包含文本的外部容器。通过将边框从.image移到其内部的图片占位符.img上，我们可以让.image成为一个通用的包裹器，其内部的图片和文本将按照正常的文档流垂直排列。

修改后的CSS:

.title {
  text-align: center;
  font-size: 36px;
  font-weight: bolder;
  color: #1F2937;
  margin-top: 45px;
}

.second_container {
  display: flex;
  justify-content: center;
  padding: 30px 0px;
  gap: 32px;
}

.img { /* 现在边框和尺寸应用于 .img，作为图片占位符 */
  border: 4px solid dodgerblue;
  height: 150px;
  border-radius: 8px;
  /* text-align: center; 此处通常不用于文本居中，而是图片内容 */
}

.image { /* .image 现在作为图片占位符和文本的容器 */
  width: 150px; /* 宽度限制应用于外部容器 */
  /* 移除 border 和 height，让内容自然撑开 */
}

span.txt {
  font-size: 18px;
  display: block; /* 确保文本占据独立行并可以应用块级布局属性 */
  text-align: center; /* 确保文本在其块级空间内居中 */
  margin-top: 10px; /* 为文本和图片之间添加一些间距 */
}

修改后的HTML:

<!--start of the random info container-->
<div class="title">
  Some random Information.
</div>
<div class="second_container">
  <div class="image">
    <