CSS-区块属性，宽、高、内边距、外边距样式属性的使用详解

CSS 区块属性

width、height

设置元素宽高

• width 设置元素的宽度

• height 设置元素的高度

  单位可以是 px 、%（相对于父级元素的宽高的百分比）、auto

padding

设置元素内填充，元素的边沿到内容之间的距离；该样式属性是一个综合属性，可以统一设置也可以单独设置

• padding 该样式属性有 1 到 4 个值；不同个数的值有着不同的作用；属性值可以是像素（px）也可以是百分比（%），使用百分比时是相对于父元素的宽进行计算

  属性值的个数	作用
  1个值 padding: x;	上下左右内边距（四周）
  2个值 padding: x x;	第一个值为上下内边距，第二个值为左右内边距
  3个值 padding: x x x;	上内边距，左右内边距，下内边距
  4个值 padding: x x x x;	上内边距，右内边距，下内边距，左内边距

单独设置某个方向的 padding

• padding-left: 左内填充距离，左边线到内容间的距离
• padding-right: 右内填充距离，右边线到内容间的距离
• padding-top: 上内填充距离，上边线到内容间的距离
• padding-bottom: 下内填充距离，下边线到内容间的距离

margin

设置元素的外边距；就是用来设置元素边沿外的空白区域的范围

• margin 该样式属性与 paddin 类似也有 1 到 4 个值；用法与 padding 相同

margin 也可以单独设置某个方向

• margin-left 元素左边线往外的距离
• margin-right 元素右边线往外的距离
• margin-top 元素上边线往外的距离
• margin-bottom 元素下边线往外的距离