CSS Margin 外边距

前言

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

  • margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。

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

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

1、简写属性

  • 为了缩短代码,有可能使用一个属性中 margin 指定的所有边距属性。这就是所谓的简写属性。
属性 描述 CSS 备注 🔗
margin 简写属性。在一个声明中设置所有外边距属性 1 🔗
  • 属性值
描述
auto 浏览器计算外边距
length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px
% 规定基于父元素的宽度的百分比的外边距
inherit 规定应该从父元素继承外边距
  • margin 简写属性在一个声明中设置所有外边距属性。该属性可以有一到四个值。

    • margin: 10px 5px 15px 20px;

      • 上边距是 10px
      • 右边距是 5px
      • 下边距是 15px
      • 左边距是 20px
    • margin: 10px 5px 15px;

      • 上边距是 10px
      • 右边距和左边距是 5px
      • 下边距是 15px
    • margin: 10px 5px;

      • 上边距和下边距是 10px
      • 右边距和左边距是 5px
    • margin: 10px;

      • 所有四个边距都是 10px
  • 实例

    1
    2
    3
    4
    5
    <style>
    p.ex1 {
    margin: 20px 40px 30px 80px;
    }
    </style>
    1
    2
    3
    <p>一个没有指定边距大小的段落。</p>
    <p class="ex1">一个指定边距大小的段落。</p>
    <p>一个没有指定边距大小的段落。</p>
  • 效果

    一个没有指定边距大小的段落。


    一个指定边距大小的段落。


    一个没有指定边距大小的段落。

2、单边外边距属性

  • 在 CSS中,它可以指定不同的侧面不同的边距。
属性 描述 CSS 备注 🔗
margin-top 设置元素的上外边距 1 🔗
margin-right 设置元素的右外边距 1 🔗
margin-bottom 设置元素的下外边距 1 🔗
margin-left 设置元素的左外边距 1 🔗
  • 属性值
描述
auto 浏览器计算外边距
length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px
% 规定基于父元素的宽度的百分比的外边距
inherit 规定应该从父元素继承外边距
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
    p {
    background-color: yellow;
    }
    p.margin {
    margin-top: 50px;
    margin-bottom: 50px;
    margin-right: 50px;
    margin-left: 50px;
    }
    </style>
    1
    2
    <p>这是一个没有指定边距大小的段落。</p>
    <p class="margin">这是一个指定边距大小的段落。</p>
  • 效果

    这是一个没有指定边距大小的段落。


    这是一个指定边距大小的段落。

3、使用 厘米值 设置外边距

  • 使用 厘米值 设置边距

  • 实例

    1
    2
    3
    4
    5
    <style>
    p.ex1 {
    margin-top: 2cm;
    }
    </style>
    1
    2
    3
    <p>一个没有指定边距大小的段落。</p>
    <p class="ex1">一个 2 厘米上边距的段落。</p>
    <p>一个没有指定边距大小的段落。</p>
  • 效果

    一个没有指定边距大小的段落。


    一个 2 厘米上边距的段落。


    一个没有指定边距大小的段落。

4、使用 百分比值 设置外边距

  • 使用 百分比值 设置边距

  • 实例

    1
    2
    3
    4
    5
    <style>
    p.bottommargin {
    margin-bottom: 5%;
    }
    </style>
    1
    2
    3
    <p>这是一个没有指定边距大小的段落。</p>
    <p class="bottommargin">这是一个指定下边距大小的段落。</p>
    <p>这是一个没有指定边距大小的段落。</p>
  • 效果

    这是一个没有指定边距大小的段落。


    这是一个指定下边距大小的段落。


    这是一个没有指定边距大小的段落。

5、CSS 实例

文章目录
  1. 1. 前言
  2. 2. 1、简写属性
  3. 3. 2、单边外边距属性
  4. 4. 3、使用 厘米值 设置外边距
  5. 5. 4、使用 百分比值 设置外边距
  6. 6. 5、CSS 实例
隐藏目录