设置2倍行高时如何让段落与容器上下左右间距均为10px？

核心问题成因 #

当前代码出现上下间距视觉不等距的本质原因是2倍行高的行盒排布规则：文字在2倍高度的行盒内会垂直居中，上下各预留占行高一半的空白空间。

• 左右方向：行盒宽度和段落可用宽度完全重合，文字没有横向偏移，外层div设置的10px左右内边距刚好形成10px的视觉间距，符合预期。
• 上下方向：第一行文字的顶部、最后一行文字的底部，和段落元素自身的块级上下边界之间，隔着半倍行高的空白。叠加外层div的10px上/下内边距后，实际视觉间距会比左右方向多出半倍行高的距离，最终导致四周边距不对称。

可落地的正确实现 #

要同时满足「段落必须设置2倍行高」「段落与外层容器上下左右视觉等距10px」两个要求，最通用的实现方式是给段落增加适配字号的垂直负边距，抵消行高带来的垂直偏移。
完整CSS代码示例：

* {
  padding: 0;
  margin: 0;
}
div {
  background: yellow;
  padding: 10px;
}
div p {
  line-height: 2;
  text-align: justify;
  /* 抵消2倍行高带来的半行垂直偏移，随字号自动适配 */
  margin: -0.5em 0;
}

这种写法的优势是：

• 用em作为单位，负边距的数值会自动跟随段落字号缩放，不需要手动根据字号计算偏移量，维护成本低。
• 抵消偏移后，段落内文字的上下边缘会和段落自身的块级边界对齐，外层div的10px四周内边距，会形成视觉上完全等距的效果，和左右方向的间距保持一致。

注意：该问题和常见的父子元素margin穿透无关——代码中已经通过全局重置清除了所有元素的默认边距，不存在margin穿透导致的间距异常。

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