CSS margin（外边距）学习笔记

CSS 中的 margin 属性用于定义元素周围的空白区域，它是一个非常重要的布局工具，可以帮助我们控制元素之间的间距，从而实现更美观和易用的页面布局。以下是对 margin 属性的详细学习笔记。

一、margin 的基本概念

margin 是元素周围的透明区域，它没有背景颜色，完全透明。margin 的主要作用是清除元素周围的其他元素区域，从而为元素提供一定的空间。

二、margin 的可能值

margin 属性可以接受以下几种值：

表格

复制

此外，margin 也可以使用负值，这会导致元素之间的重叠。

三、单边外边距属性

在 CSS 中，可以单独设置元素的上、下、左、右边距，具体如下：

• margin-top：设置元素的上外边距。

• margin-right：设置元素的右外边距。

• margin-bottom：设置元素的下外边距。

• margin-left：设置元素的左外边距。

示例

css

复制

margin-top: 100px;
margin-bottom: 100px;
margin-right: 50px;
margin-left: 50px;

四、margin 简写属性

为了简化代码，CSS 提供了 margin 简写属性，可以在一个声明中设置所有外边距属性。

margin 属性可以接受一到四个值，具体规则如下：

• 四个值：margin: 25px 50px 75px 100px;

  • 上边距为 25px

  • 右边距为 50px

  • 下边距为 75px

  • 左边距为 100px

• 三个值：margin: 25px 50px 75px;

  • 上边距为 25px

  • 左右边距为 50px

  • 下边距为 75px

• 两个值：margin: 25px 50px;

  • 上下边距为 25px

  • 左右边距为 50px

• 一个值：margin: 25px;

  • 所有四个边距都是 25px

示例

css

复制

/* 四个值 */
margin: 25px 50px 75px 100px;

/* 三个值 */
margin: 25px 50px 75px;

/* 两个值 */
margin: 25px 50px;

/* 一个值 */
margin: 25px;

五、更多实例

1. 使用厘米值设置文本的上边距

css

复制

margin-top: 2cm;

2. 使用百分比值设置文本的下边距

css

复制

margin-bottom: 20%;

六、所有 CSS 边距属性

以下是所有与 margin 相关的 CSS 属性及其描述：

表格

复制