为何padding-left与height的效果和padding-bottom与width不一致？

嘿，这个问题问得特别准，刚好说到了CSS盒模型和正常流布局里一个容易被忽略的差异点，我来给你拆解清楚：

先搞懂默认的CSS盒模型规则 #

默认情况下，CSS用的是content-box盒模型：

• 你设置的width和height，仅指元素内容区的尺寸，padding、border都是额外加到外面的。
• 但块级元素的水平、垂直布局逻辑天生不一样：
  • 垂直方向：高度默认是auto，也就是由内容高度决定（空元素的话就是0）。
  • 水平方向：宽度默认是auto，会自动填充父容器的可用水平空间（比如父容器是body的话，就占满浏览器宽度）。

第一个场景：width固定 + padding-top/bottom #

当你给div设置了固定width，但没设置height时：

• 内容区的高度是0（因为空元素），所以盒子的总高度就是padding-top + padding-bottom，相当于用padding直接撑起了高度，完全符合你的预期。
• 这时候总宽度是width + padding-left + padding-right（如果没设padding左右的话就是你设置的width），因为width是固定值，浏览器不会去调整它，所以padding左右也会正常撑开宽度。

第二个场景：height固定 + padding-left/right #

这时候你设置了固定height，但没设置width：

• 因为块级元素宽度默认是auto，浏览器会强制让盒子的总宽度等于父容器的可用宽度。当你添加padding-left/right时，浏览器不会增加总宽度，反而会缩小内容区的宽度（总宽度 = 内容区宽度 + padding左右 → 内容区宽度 = 父容器宽度 - padding左右）。
• 所以你看不到盒子的总宽度被padding撑开，反而内容区变窄了，这就造成了“没生效”的错觉。

怎么让第二个场景和第一个逻辑一致？ #

如果你想让设置height后，用padding左右来撑开总宽度，只需要给div额外加一个width: 0：

.second-div {
  height: 100px;
  width: 0;
  padding-left: 200px;
  padding-right: 50px;
  background: #ccc;
}

这时候内容区宽度是0，盒子的总宽度就等于padding-left + padding-right，和第一个场景用padding上下撑高度的逻辑完全一致了。

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