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

mac2022-06-30  47

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 元素下边线往外的距离
最新回复(0)