如何让DIV边框贴近内部元素且不修改h标签外边距？

你遇到的是CSS里的外边距折叠问题：当父元素没有边框、内边距或其他能触发BFC的属性时，子元素（比如h2）的外边距会和父元素的外边距折叠，所以带背景色的div看起来范围紧贴文本；但给父元素加边框后，外边距不会折叠，h2的外边距就会把父元素撑大，导致边框离文本很远。

不用修改h标签的外边距，有这几个可行办法：

方法1：给父元素加极小内边距 #

给带边框的div加一点内边距（比如1px），就能阻止外边距折叠，同时几乎不影响布局：

.text-2 {
  background-color: lightgray;
  border: solid 3px black;
  padding: 1px; /* 阻止外边距折叠 */
}

方法2：触发BFC（使用overflow:hidden） #

给父元素设置overflow: hidden，创建块级格式化上下文，也能阻止外边距折叠：

.text-2 {
  background-color: lightgray;
  border: solid 3px black;
  overflow: hidden; /* 触发BFC */
}

注意：如果子元素有超出父元素的内容（比如绝对定位元素），这个属性会截断内容，需要谨慎使用。

方法3：使用display: flow-root（推荐） #

这是CSS新增的属性，专门用来创建无副作用的BFC，不会截断内容，是最稳妥的现代方案：

.text-2 {
  background-color: lightgray;
  border: solid 3px black;
  display: flow-root; /* 创建BFC，阻止外边距折叠 */
}

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