W3C CSS学习笔记

padding

padding是指元素的内边距，元素距离盒子边框的距离。

padding属性

• padding-top
• padding-right
• padding-bottom
• padding-left

属性的取值：

• length - px, pt, cm, etc.
• % - 设置为外框宽度的%
• inherit - 设置为跟父元素一样的值

设置方法

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

简写：

div {
  padding: 25px 50px 75px 100px;
}

如果padding属性设为3个值：

• padding: 25px 50px 75px;
  • top padding is 25px
  • right and left paddings are 50px
  • bottom padding is 75px

如果padding属性设为2个值：

• padding: 25px 50px;
  • top and bottom paddings are 25px
  • right and left paddings are 50px

如果padding属性设为1个值：

• padding: 25px;
  • all four paddings are 25px

Padding和元素宽度

如果指定了padding属性，元素的实际宽度需要把padding考虑进去。

div {
  width: 300px;
  padding: 25px;
}

此时div的宽度为：300px + 25px + 25px.

如果仍想保持宽度为300px，则需要设置box-sizing属性：

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}