css间距

CSS中可以通过margin和padding属性来设置元素的间距。

1、margin属性用于设置元素的外边距，即元素与周围元素之间的距离。

div {
margin: 10px; /* 四个方向的外边距都是10px */
margin-top: 10px; /* 上方的外边距为10px，其余方向的外边距为默认值0 */
margin: 10px 20px; /* 上下的外边距为10px，左右的外边距为20px */
margin: 10px 20px 30px; /* 上下的外边距为10px，左右的外边距为20px，上方的外边距为30px */
margin: 10px 20px 30px 40px; /* 上下左右的外边距分别为10px、20px、30px、40px */
}

2、padding属性用于设置元素的内边距，即元素内容与元素边框之间的距离。

div {
padding: 10px; /* 四个方向的内边距都是10px */
padding-top: 10px; /* 上方的内边距为10px，其余方向的内边距为默认值0 */
padding: 10px 20px; /* 上下的内边距为10px，左右的内边距为20px */
padding: 10px 20px 30px; /* 上下的内边距为10px，左右的内边距为20px，上方的内边距为30px */
padding: 10px 20px 30px 40px; /* 上下左右的内边距分别为10px、20px、30px、40px */
}

需要注意的是，margin和padding属性可以单独设置四个方向的值，也可以按照顺序依次设置四个方向的值，其中用空格分隔。如果只设置一个值，四个方向的值将相等。如果只设置两个值，上下方向和左右方向的值将相等。如果只设置三个值，上下方向和左右方向的值将相等，上方的值将不同。如果设置四个值，分别对应上、右、下、左四个方向。