如何正确将文本置于标题正下方且避免布局错乱

在网页布局开发中，将文本精准放置在标题正下方且保持布局稳定是常见需求，很多开发者会因为忽略CSS的默认规则导致间距异常、元素错位等问题，下面先介绍核心的实现思路和常见问题。

常见布局错乱的原因

外边距合并问题

在标准文档流中，相邻块级元素的上外边距和下外边距会发生合并，合并后的外边距取两者中较大的那个值，这会导致标题和下方文本的间距不符合预期。比如标题设置了margin-bottom: 20px，文本设置了margin-top: 10px，最终两者的间距会是20px而不是30px。

盒模型计算误差

如果元素没有设置box-sizing: border-box，那么元素的宽度和高度会包含内容区、内边距和边框，这会让开发者计算的元素尺寸和实际渲染尺寸不一致，进而导致文本位置偏移。

默认样式干扰

浏览器会给h1到h6的标题标签自带默认的外边距，同时p、div等文本容器也有默认样式，这些默认样式如果没有统一重置，很容易造成布局错乱。

标准文档流下的实现方案

首先建议先重置默认样式，避免浏览器自带样式干扰，然后合理设置外边距即可实现文本在标题正下方。

/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 标题样式 */
.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px; /* 设置标题和下方文本的间距 */
}

/* 文本样式 */
.text {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

<h2 class="title">这是示例标题</h2>
<p class="text">这是标题下方的文本内容，通过合理设置外边距可以保证文本在标题正下方，不会出现布局错乱的问题。</p>

Flex布局下的实现方案

如果使用Flex布局容器包裹标题和文本，只需要设置垂直方向排列，就可以避免外边距合并的问题，同时能更灵活控制对齐方式。

.flex-container {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  gap: 16px; /* 子元素之间的间距，不会触发外边距合并 */
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.text {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

<div class="flex-container">
  <h2 class="title">这是示例标题</h2>
  <p class="text">这是标题下方的文本内容，Flex布局的gap属性可以直接控制间距，不会受外边距合并影响。</p>
</div>

Grid布局下的实现方案

Grid布局同样可以很方便地实现标题和文本的垂直排列，通过grid-gap或者row-gap设置行间距即可。

.grid-container {
  display: grid;
  grid-template-rows: auto auto; /* 两行，第一行放标题，第二行放文本 */
  row-gap: 16px; /* 行间距 */
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.text {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

<div class="grid-container">
  <h2 class="title">这是示例标题</h2>
  <p class="text">这是标题下方的文本内容，Grid布局的行间距设置同样能避免外边距合并带来的问题。</p>
</div>

注意事项

• 如果需要兼容旧版本浏览器，优先使用标准文档流方案，同时做好默认样式重置。
• Flex和Grid布局的gap属性在旧版本浏览器中支持度有限，使用前需要确认兼容需求。
• 不要同时给标题设置margin-bottom和文本设置margin-top，避免外边距合并导致间距不符合预期。
• 如果文本需要居中对齐，给标题和文本容器都设置text-align: center即可，不要单独给其中一个设置。

CSS布局标题文本对齐margin_collapsebox_modelvertical_alignment修改时间：2026-07-11 14:48:25