css margin

作者：硝烟发布日期:2026-05-18 浏览:53

/* 示例代码：使用 CSS margin 属性 */

/* 1. 设置所有边的外边距 */
.example1 {
    margin: 20px; /* 上下左右都设置为20px */
}

/* 2. 分别设置四个方向的外边距 */
.example2 {
    margin: 10px 20px 30px 40px; /* 上 右 下 左 */
}

/* 3. 设置上下和左右的外边距 */
.example3 {
    margin: 10px 20px; /* 上下为10px，左右为20px */
}

/* 4. 设置上下外边距，左右外边距为0 */
.example4 {
    margin: 10px 0; /* 上下为10px，左右为0 */
}

/* 5. 使用 auto 实现水平居中 */
.example5 {
    width: 50%;
    margin: 0 auto; /* 水平居中 */
}

解释说明：

margin 属性用于设置元素的外边距（即元素与其他元素之间的空白区域）。
可以通过不同的方式来设置 margin，例如：
- 单个值：设置所有四边的外边距相同。
- 四个值：分别设置上、右、下、左的外边距。
- 两个值：第一个值设置上下外边距，第二个值设置左右外边距。
- auto 值：可以用于水平居中对齐块级元素。

上一篇：css 透明度

下一篇：css定位