All Articles

padding、margin 纵向取值问题

今天要说一个很基础,但被我自己忽略至今的一个简单问题:padding、margin 在纵向取值为百分数时,它们相对的是父元素的高度吗? 这个问题之所以被忽略,是因为使用场景有限。因为在布局的时候,我们通常只关注宽度,流式布局、响应式布局中,我们常常会给 padding 设置横向的百分比数值。但纵向上,我们通常还是倾向于设置固定值。回到问题本身,我一直以为在横向上参照父元素的宽度,那么在纵向上应该参照父元素的高度。这其实是不对的,都是参照父元素的宽度。验证很容易,我不做示例了,贴上 MDN 的资料:

Values

Specifies one, two, three or four of the following values:

<length>
Specifies a non-negative fixed width. See <length> for details.
<percentage>
With respect to the width of the containing block.
  • One single value applies to all 4 sides
  • Two values apply to 1. top and bottom and 2. to the left and right side
  • Three values apply to 1. top, 2. right and left and 3. to the bottom side
  • Four values apply to 1. top, 2. right, 3. bottom and 4. to the left side
发布于2014年12月23日

有趣的灵魂终会相遇
@周骅