导航分类

CSS 边框（border）CSS 内边距（padding）

CSS 外边距（margin）

主题

默认模式
浅蓝色模式
淡红色模式
深夜模式

CSS 外边距

外边距margin是一个非常实用的属性，它定义了元素边框与周围元素之间的空白区域。

通过 CSS margin属性，你可以完全的控制元素的每侧（上、右、下和左）的空白区域大小。

下面是通过margin属性，来设置外边距的演示效果：

margin:0;

上边距 0px
右边距 0px
下边距 0px
左边距 0px

CSS 外边距属性

CSS margin属性提供了多种设置外边距的方式，以满足用户的不同需求。

当两个块级元素垂直边距相遇时，它们会合并为一个边距，这种现象称为"边距折叠"，取两个边距中较大的那个值。

1. 单值设置 - 四个方向相同

实例代码运行代码

复制

margin: 10px; /* 上右下左都是10px */

2. 双值设置 - 上下/左右

实例代码运行代码

复制

margin: 10px 20px; /* 上下10px，左右20px */

3. 三值设置 - 上/左右/下

实例代码运行代码

复制

margin: 10px 20px 15px; /* 上10px，左右20px，下15px */

4. 四值设置 - 上/右/下/左(顺时针)

实例代码运行代码

复制

margin: 10px 20px 15px 5px; /* 上10px，右20px，下15px，左5px */

5. 单独设置各边

实例代码运行代码

复制

margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;

CSS 外边距特殊值

auto：浏览器自动计算边距，常用于水平居中

实例代码运行代码

复制

margin: 0 auto; /* 上下0，左右自动(水平居中) */

inherit：继承父元素的边距值

实例代码运行代码

复制

margin: inherit;

百分比值：相对于包含块的宽度计算

实例代码运行代码

复制

margin: 5%; /* 基于父元素宽度的5% */

CSS 外边距实用技巧

1. 居中元素

实例代码运行代码

复制

.center {
    width: 50%;
    margin: 0 auto; /* 水平居中 */
}

2. 重置默认边距

实例代码运行代码

复制

body {
    margin: 0; /* 移除浏览器默认边距 */
}

3. 响应式边距

实例代码运行代码

复制

.box {
    margin: 2%;
    /* 在小屏幕上自动调整 */
}

4. 负边距

实例代码运行代码

复制

.pull-left {
    margin-left: -20px; /* 向左移动元素 */
}

CSS 边框（border）CSS 内边距（padding）

评论区 0

发表评论

教程介绍

CSS 层叠样式表（Cascading Style Sheets），一种用于为 HTML 或 XML 添加样式的语言。

36 章节

70 阅读

0 评论

CSS 外边距（margin）

CSS 外边距

CSS 外边距属性

CSS 外边距特殊值

CSS 外边距实用技巧

CSS 基础教程

CSS3 教程

CSS 外边距（margin）

CSS 外边距

CSS 外边距属性

CSS 外边距特殊值

CSS 外边距实用技巧

CSS 基础教程

CSS3 教程

意见反馈

反馈提交成功