margin/padding-top/bottom 的百分比

margin/padding-top/bottom 的百分比之所以按照 width 计算，其实理由很简单，就是要匹配主要的 use cases。那就是——要构建在纵横两个方向上相同的 margin/padding。如果两个百分比的相对方式不同，那用百分比就无法得到垂直和水平一致的留白。

有人也许会问，为什么不是垂 直方向上的 height 而是水平方向的 width？这其实容易理解。因为 CSS 的基本模型是着重于“排版”的需求，因此水平和垂直方向其实并不是同等权重的，更精确的说，是文字书写方向决定的。常见的横排文字时，我们排版的出发点是 水平宽度一定，而垂直方向上是可以无限延展的。竖排文字则相反。所以在竖排文字时，margin/padding-* 其实就都按照 height 而不是 width 计算了。类似的且大家更熟悉的是 margin-top/bottom 在垂直方向上的 collapse（或者当竖排文字时是 margin-left/right 水平方向上的 collapse）。为什么只有垂直方向 collapse 而水平就不呢？因为在典型的排版中，段落间的空白进行 collapse 是常见和方便的。而反过来水平方向上就几乎没有那样的需求（只有表格在两个方向上有对称的 border collapse 的需求）。同样的，在排版中，横向百分比控制是常见的需求，但是纵向其实很少这样的需求。有这样需求的其实是GUI界面布局，布局和排版的区别在这个答案 （ 在 CSS 布局中，用 float 好还是用 position 好？分别有什么优势？ ）我也提到过。

至于说死循环问题，其实这不是根本原因。大家可以想想 width 为什么就不存在死循环了呢？

BTW， 在现代web应用中，其实我们有更多的纵向横向布局分割需求，这是传统的百分比不能很好满足的，所以CSS3实际上加入了 vw 和 vh 单位（相对于viewport的宽度和长度百分比），这比较好的解决了传统CSS中margin/padding的百分比所不能满足的那些需求。