关于Section元素margin与display属性的布局异常问题咨询

原始代码（含语法错误） #

CSS 代码

Section {
  background-color: #FFFFFF;
  width="100%;" /* 错误：CSS属性应使用冒号，正确写法为 width: 100%; */
}

p1 { /* 错误：应为类选择器 .p1，HTML中p标签使用的是class="p1" */
  font-family: Roboto;
  font-size: 22px;
  font-height: 1px; /* 错误：无效属性，应为 line-height */
  margin-top: 45px;
  margin-left: 165px;
}

p2 { /* 错误：应为类选择器 .p2 */
  font-family: Roboto;
  font-size: 22px;
  font-height: 1px;
  margin-top: 10px;
  margin-left: 165px;
}

HTML 代码

<section>
  <p class="p1"> Content 1 </p>
  <p class="p2"> Content 2 </p>
</section>

现象原因解析 #

1. 基础语法错误的影响

   • 选择器错误导致CSS样式未正确作用到p标签，直接造成布局表现与预期偏差；属性语法错误让width、行高设置失效，进一步干扰布局判断。

2. 核心问题：垂直外边距合并（Margin Collapse）
   当section为默认的display: block时，块级元素的垂直外边距会发生合并：内部p元素的margin-top会和section的margin-top合并，最终表现为section被p的margin顶出页面顶部，section的背景自然无法覆盖这个被顶出去的margin区域——这就是“背景无法覆盖全部内容”的根本原因。

3. 不同display值的表现差异

   • display: block：section默认状态，触发垂直外边距合并，背景无法覆盖p的margin区域。
   • display: inline：inline元素不参与块级布局，垂直方向的margin不会影响元素自身高度，同时inline元素无法设置width: 100%，因此背景依然无法覆盖p的margin区域。
   • display: inline-block：属于行内块元素，不会触发垂直外边距合并，p元素的margin会被包含在section的内部空间中，因此section的背景可以覆盖全部内容。

内容的提问来源于stack exchange，提问作者Anh Khoa Nguyễn Trần