如何使用CSS移除指定块容器首尾子元素的块级布局行为

同一份CSS可以完全适配三种不同HTML结构的排版要求，无需针对结构修改代码，核心是通过几个CSS特性的组合，绕过块级元素的默认排版限制。

核心实现逻辑 #

针对三种场景的排版要求，核心匹配规则为：

• 包裹段落的外层div不生成独立渲染盒子，让内部p标签和前后的纯文本节点处于同一排版流
• p标签默认通过左浮动和相邻文本实现同排衔接，消除默认块级元素的独占行特性
• 仅当两个p标签为相邻兄弟关系时，为后一个p标签设置清除浮动+顶部间距，实现段落间的空行分隔

完整CSS代码 #

pre code {
  font-family: monospace;
  line-height: 1.5;
  white-space: pre-wrap;
  /* 形成BFC，避免内部浮动元素导致容器高度塌缩 */
  overflow: auto;
}
/* 移除外层div的渲染盒子，让内部p直接融入排版流 */
pre code div {
  display: contents;
}
/* 重置p的默认块级边距，通过左浮动和相邻文本同排 */
pre code p {
  float: left;
  margin: 0;
  padding: 0;
}
/* 相邻p标签的分隔逻辑：清除浮动换至新行，留1em空行高度 */
pre code p + p {
  clear: left;
  margin-top: 1em;
}

方案适配验证 #

• 结构1（两个p标签：hello、world）：p1和前面的hi同排，p2因相邻兄弟规则换行留空，和后面的baz同排，最终呈现hi hello空行后接world baz，符合要求
• 结构2（单个p标签：hello world）：不存在相邻p兄弟，p和前后的hi、baz自然同排，最终整行呈现hi hello world baz，符合要求
• 结构3（三个p标签：hello、foo、world）：每相邻两个p都会触发分隔规则，最终呈现hi hello空行接foo空行接world baz，完全匹配要求

前期尝试失效的原因 #

之前使用first-child、last-child伪类调整样式失效的核心问题是：没有移除外层div的块级盒子特性，div本身会占据独立行，把前后的文本节点和内部的p标签完全隔开，p根本无法和相邻文本形成同排衔接，无论怎么调整伪类的边距，都没法实现文本和段落的自然拼接效果。

注：display: contents 目前已获得所有现代浏览器的完整支持，可直接用于生产环境。

内容的提问来源于stack exchange，提问作者Lodewijk Bogaards