为什么 CSS 边距和内边距是相对于宽度计算的
在 CSS 领域，出现了一个有趣的怪癖：边距和内边距总是相对于包含块的宽度计算。这种神秘的设计决策与直观的预期背道而驰，引发了一个问题：为什么？
CSS 盒模型规范指出“[margin] 百分比是根据生成的盒包含块的宽度计算的。”这种不一致延伸到“margin-top”和“margin-bottom”，如果包含块的宽度取决于相关元素，则可能会渲染布局未定义。
那么为什么会采用这种非常规的方法呢？虽然没有明确的答案，但毫无根据的猜想表明，关键在于元素高度的确定。
元素高度通常由其子元素的高度定义。如果父元素有一个 padding-top （相对于父元素的高度），它将影响父元素的整体高度。然而，由于子级的高度依赖于父级，因此会出现循环依赖。
这种依赖问题超出了直接包含的情况（偏移父级 === 父级）。叶元素（没有子元素的子元素）的高度会影响其上方的所有元素。因此，这种设计选择确保了一致性并防止潜在的高度计算错误。
以上是为什么 CSS 边距和填充是相对于宽度计算的？的详细内容。更多信息请关注PHP中文网其他相关文章！
