添加border为何会"向下挤压"内部内容？如何解决？

嘿，这个现象其实是CSS里非常经典的外边距折叠在作祟！咱们来拆解一下：

浏览器默认样式里，<p>元素自带上下外边距（比如margin-top: 1em左右，具体值取决于浏览器）。当你的<div>没有border、padding，也没有其他能分隔父子元素的内容时，子元素<p>的顶部外边距会和父元素<div>的顶部外边距折叠合并——说白了就是，p的margin-top并没有作用在div内部，而是“跑到”了div的外面，所以视觉上p会紧贴着div的左上角。

但一旦你给div加上border，就相当于在父元素的顶部和子元素之间加了一层“阻隔”，打破了外边距折叠的条件，这时候p的margin-top就会正常作用在div内部，把p往下推；而左边因为p默认的margin-left是0，所以依然紧贴div左侧，就出现了你看到的“顶部被挤压”的效果。

这里给你几个实用的方案，按需选择：

• 给父元素添加padding-top：哪怕是极小的值（比如padding-top: 1px），就能阻止外边距折叠，同时不会对布局造成明显影响。代码示例：

  div { padding-top: 1px; }
  

• 给父元素设置透明边框：如果你不想显示边框，可以把border设为透明，既打破折叠又不影响视觉：

  div { border-top: 1px solid transparent; }
  

• 给父元素创建BFC（块级格式化上下文）：这是更通用的解决方式，推荐用display: flow-root（专门为解决这类问题设计，无副作用），或者overflow: hidden（注意会裁剪溢出的内容，按需使用）：

  /* 推荐无副作用的方案 */
  div { display: flow-root; }
  /* 备选方案，注意溢出裁剪 */
  div { overflow: hidden; }
  

• 移除子元素的顶部外边距：如果你的设计里不需要p的顶部外边距，直接清零就行：

  p { margin-top: 0; }
  

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