CSS外边距属性（margin）

点击打开在线编译器，边学边练

一、CSS外边距属性（margin）

属性	描述
margin	简写属性。在一个声明中设置所有边距属性
margin-bottom	设置元素的下外边距属性
margin-left	设置元素的左外边距属性
margin-right	设置元素的右外边距属性
margin-top	设置元素的上外边距属性

CSS margin(外边距)属性定义元素周围的空间。

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

CSS外边距属性

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

1. 使用像素值（px）设置外边距

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS简单学习</title>
        <style type="text/css">
            p.nomargin {
                background-color: #FF0000
            }
            p.margin {
                background-color: #FF0000;
                margin-top: 100px;
                margin-bottom: 100px;
                margin-left: 80px;
                margin-right: 80px;
            }
        </style>
    </head>

    <body>
        <p>这是一个没有指定边距大小的段落</p>
        <p>这是一个指定过边距大小的段落</p>
    </body>
</html>

运行结果：

使用像素值（px）设置外边距

2. 使用margin简写属性设置外边距（厘米值cm、百分比值%）

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

实例:

（1）margin:10px 5px 15px 20px;

a.上边距是 10px

b.右边距是 5px

c.下边距是 15px

d.左边距是 20px

（2）margin:10px 5px 15px;

a.上边距是 10px

b.右边距和左边距是 5px

c.下边距是 15px

（3）margin:10px 5px;

a.上边距和下边距是 10px

b.右边距和左边距是 5px

（4）margin:10px;

a.所有四个边距都是 10px

注意：负值是允许的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS简单学习</title>
        <style type="text/css">
            p {
                background-color: aqua;
            }
            p.ex1 {
            margin: 2cm 5cm 3cm 5cm;
            }
            p.ex2 {
            margin: 20% 25% 30% 35%;
            }
        </style>
    </head>

    <body>
        <p>这是一个没有指定边距大小的段落</p>
        <p>这是一个使用&quot;厘米cm&quot;指定边距大小的段落</p>
        <p>这是一个使用&quot;百分比值%&quot;指定边距大小的段落</p>
    </body>
</html>

运行结果：

使用margin简写属性设置外边距