You are here
padding 百分比宽度
padding-width的取值
- <length>: 长度表示法
- <percentage>: 百分比表示法,padding百分比的计算是基于生成的框的包含块的宽度,不是基于高度
- auto: 自动
来自 http://www.dreamdu.com/css/property_padding/
CSS中margin-top/bottom(padding-top/bottom)百分比为何以最近的块级祖先元素的宽度而不是高度作计算？
CSS2.1 Box model
padding与之类似。
margin-top的计算值为何不相对于 containing block height？唯一能想出来的原因是margin-top值增大会撑开父容器的height，导致循环计算。但，margin-top值的percent相对于 containing block width有什么意义？出于什么原因要这样设计？因为如果仅仅因为循环计算的原因，我觉得也可以用变通的方式来实现，比如：要求父容器固定高度时，margin-top百分比值生效，父容器不固定大小时，margin-top 百分比值不生效！
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.margin：百分比的计算基于生成框的包含块的宽度（margin-top/bottom也是如此）。
padding与之类似。
margin-top的计算值为何不相对于 containing block height？唯一能想出来的原因是margin-top值增大会撑开父容器的height，导致循环计算。但，margin-top值的percent相对于 containing block width有什么意义？出于什么原因要这样设计？因为如果仅仅因为循环计算的原因，我觉得也可以用变通的方式来实现，比如：要求父容器固定高度时，margin-top百分比值生效，父容器不固定大小时，margin-top 百分比值不生效！
按票数排序按时间排序
2 个回答
泻药。
@胡文斌 给出的stackoverflow上的这个答案与题主的猜想都是不正确的。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的百分比所不能满足的那些需求。
@胡文斌 给出的stackoverflow上的这个答案与题主的猜想都是不正确的。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的百分比所不能满足的那些需求。
普通分类: