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

• 实例

  <style>
      p.ex1 {
          margin: 20px 40px 30px 80px;
      }
  </style>

  <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	规定应该从父元素继承外边距

• 实例

  <style>
      p {
          background-color: yellow;
      }
      p.margin {
          margin-top: 50px;
          margin-bottom: 50px;
          margin-right: 50px;
          margin-left: 50px;
      }
  </style>

  <p>这是一个没有指定边距大小的段落。</p>
  <p class="margin">这是一个指定边距大小的段落。</p>

• 效果

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

  
  

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

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

• 使用 厘米值 设置边距

• 实例

  <style>
      p.ex1 {
          margin-top: 2cm;
      }
  </style>

  <p>一个没有指定边距大小的段落。</p>
  <p class="ex1">一个 2 厘米上边距的段落。</p>
  <p>一个没有指定边距大小的段落。</p>

• 效果

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

  
  

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

  
  

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

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

• 使用 百分比值 设置边距

• 实例

  <style>
      p.bottommargin {
          margin-bottom: 5%;
      }
  </style>

  <p>这是一个没有指定边距大小的段落。</p>
  <p class="bottommargin">这是一个指定下边距大小的段落。</p>
  <p>这是一个没有指定边距大小的段落。</p>

• 效果

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

  
  

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

  
  

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

5、CSS 实例

• 指定一个元素的边距


• 边距缩写属性


• 文本顶部边距设置的值使用厘米


• 使用百分比值设置文本的底部边缘


• 使用厘米值设置文本的左边距

, CSS3