CSS边距与填充。有什么区别？

吴欣
229 阅读7分钟

在CSS中，有两个最常用的间距属性margin 和padding。 很多刚接触CSS的人常常会把一个属性和另一个属性混淆，因为这两个属性的概念都很相似。如果你是一个中级或高级的CSS学习者，你一定知道margin和padding之间的区别以及它们的作用和用途。

对于每个前端开发者来说，理解margin和padding的区别是非常重要的，因为这两个属性为网站提供了更优雅和更好看的空间。

所以在这篇文章中，让我们来看看这两个属性和它们的作用。为了更好地理解这两个属性，我们将讨论一些代码和它们的视觉例子。

Margin和Padding的区别是什么？

在我们深入了解margin和padding之间的所有区别之前，让我们先看看padding和margin的定义。

  • 填充。 填充是用来设置元素的边界和内容之间的空间。

  • 边距。 margin用于设置两个元素之间的空间，简单地说，就是调整元素边框外的空间。

简而言之，我们可以说padding提供了元素内容周围的空间，但margin提供了元素周围的空间。

通过CSS盒子模型可以很容易地看到padding和margin之间的区别。每一个HTML元素都被定义为一个矩形盒子，而CSS则将其视为一个盒子模型，看起来像这样。

在上面的盒子模型图片中，你可以看到padding是边框内的空间，margin是边框外的内容。而边框限制了元素的范围。

在CSSPadding 属性的帮助下，我们可以操纵内容和元素边框之间的间隙。

让我们借助一个例子来看看吧

填充示例

<!DOCTYPE html>
<html>
  <head>
 <style>

   div{
     border:2px solid black;
     background-color: lightpink;
   }

   h1{
     border:2px solid green;
     background-color:lightblue;

     /* Padding 52px from all side top right bottom and left */
     padding: 52px; 
   }

 </style> 
  </head>

  <body>
 <div>
   <h1>Hello World!</h1>
 </div>
  </body>
</html>

输出

在上面的例子中，我们为h2元素提供了padding属性，这就是为什么空间只在h1元素的边界内应用。h2的内容是 "Hello World"，由于padding 52px，Hello World！和h2的绿色边框之间的空间是52px。

另一方面，margin 指定的是元素边框以外的空间。我们可以使用上述同样的例子，看看当我们对h2元素应用margin时，它发生了什么。

例子

<!DOCTYPE html>
<html>
  <head>
 <style>
 
   div{
     border:2px solid black;
     background-color: lightpink;
   }

   h1{
     border:2px solid green;
     background-color:lightblue;
     
        /* Padding 52px from all side top right bottom and left */
     padding: 52px; 
     
     /*margin 32 px*/
     margin:32px;
   }
 </style>

  </head>
  <body>
 <div>
   <h1>Hello World!</h1>
 </div>
  </body>
</html>

输出

通过指定h2元素的margin为32px，它在绿色边框外设置了32px的上、下、左、右空间。这就是它在元素的边框外设置空间的作用。

在输出的图片中，h2的绿色边框外的粉色空间是margin空间，边框内的蓝色空间是padding空间。

CSS页边距与填充。头对头比较

现在让我们来逐一比较padding和margin，以了解这两个属性之间的技术差异。

页边距

填充

margin是指元素边框以外的空间。padding是元素边界内的空间。
margin属性可以接受自动值。Padding不支持自动值。
margin值可以是负值，也可以是浮动值。padding的值也可以是一个浮点数，但不能是负数。
元素或内容的特定属性对margin没有任何影响，因为它是元素区域外的空间。而元素的属性，如高度、宽度等，则对padding有影响。

什么时候使用CSS中的padding属性

当你在HTML文档中设置空间时，了解调整边距空间或填充空间的天气很重要。让我们看看一些常见的情况，我们使用padding属性来提供空间。

1: 在内容和边框之间添加空间

这是padding属性的最常见和最直接的应用。通过padding，我们可以为内容的顶部、底部、左侧和右侧设置不同的空间。

例子

<!DOCTYPE html>
<html>
  <head>
 <style>

   h1{
     border:2px solid green;
     background-color:lightblue;

        /* Padding 52px from the top
     and 10px, 10px & 10px from the right, bottom and left respectively*/

     padding: 52px 10px 10px 10px ; 
   }
 </style> 
  </head>

  <body>
   <h1>Hello World!</h1>
  </body>
</html>

输出

2: 改变按钮和表单输入等元素的大小

padding属性可以影响元素的整体高度和宽度。我们可以在按钮上使用padding属性，在保持字体大小不变的情况下扩大按钮的面积。

例子

<!DOCTYPE html>
<html>
  <head>
 <style>

   button{
       /*top bottom 10 px, left-right 20px */
       padding: 10px 20px;
       
       color: white;
       font-size:16px;
       font-weight:bolder;
       background-color: #007bff;
       border: 0px;
       border-radius:12px;
   }
 </style>
 
  </head>

  <body>
   <button>Press</button>
  </body>

</html>

输出

什么时候使用CSS中的边距属性

现在让我们来讨论一下何时使用CSS中的margin属性。

1、用空间来分隔两个部分

通过margin，我们可以在两个堆叠的部分之间设置一个空间。我们可以在上面的部分设置margin-bottom属性，或者在下面的部分设置margin-top属性，都可以在两部分之间设置一个空格。

<!DOCTYPE html>
<html>
  <head>
 <style>
   h1{
     border:2px solid green;
     background-color:lightblue;
   }
   
   h2{
     border:2px solid red;
     background-color:lightgreen;
     /*margin of 40px around the h2*/
     margin:40px;
   }
 </style>
 
  </head>

  <body>
   <h1>Hello World!</h1>
   <h2>Welcome to TGB</h2>
  </body>
</html>

输出

2: 重叠元素

我们经常会遇到这样的设计，当我们需要将一个元素重叠在另一个元素上时，在这种情况下，我们可以使用 margin 属性，因为它也支持负值。

例子

<!DOCTYPE html>
<html>
  <head>
 <style>

   .red{
       height:40px;
       width:40px;
       background-color:red;
       border: 1px solid white;
       border-radius: 50%;
   }

   .green{
       height:40px;
       width:40px;
       background-color:green;
       border: 1px solid white;
       border-radius: 50%;
       
       /*negative margin toward left for overlap */
       margin-left: -20px;
   }

   .orange{
       height:40px;
       width:40px;
       background-color:orange;
       border: 1px solid white;
       border-radius: 50%;

       /*negative margin toward left for overlap */
       margin-left: -20px;
   }

   .blue{ height:40px;
       width:40px;
       background-color:blue;
       border: 1px solid white;
       border-radius: 50%;
       /*negative margin toward left for overlap */
       margin-left: -20px;
   }
 </style>
 
  </head>

  <body style="display:flex">
   <div class="red"></div>
   <div class="green"></div>
   <div class="orange"></div>
   <div class="blue"></div>   
  </body>
</html>

输出

3: 将元素向中心移动

margin也支持自动值，它可以自动定义一个固定宽度或高度的从上到下或从左到右的同等大小的空白。

我们可以使用auto值和margin属性来使元素在水平或垂直方向上居中。

例子

<!DOCTYPE html>
<html>
 <head>
    <style>
      .center 
            {
               margin: auto;
               width: 40%;
             }
     </style>
 </head>

 <body>

     <div class="center"
       <h1>Hello World!</h1>
     </div>
 </body>
</html>

输出

CSS边框

边框是分隔margin和padding空间的线条。默认情况下，大部分元素没有边框长度，这意味着默认的边框长度为0px。

要设置一个边框，我们可以使用border属性

例子

p{

 /* 2px is the length, solid define the borderline style and black is the color of the border*/
 border : 2px solid black;
}

如何在CSS中添加padding？

一个元素有四个面，我们可以为所有这些面设置四个不同的填充空间。

在CSS中，我们有专门针对各个面的填充属性，还有一种速记方法，可以在一行中设置空间。

填充语法

a. padding-top: 值。

填充到顶部

b. padding-right:value;

向右填充

c. padding-left:值。

向左的填充

d. padding-bottom:value;

填充到底部

e. padding:值。

速记法，可以一次设置所有的padding边。

f. padding: top-bottom-value left-right-value;

设置顶部和底部、左侧和右侧的padding值。

g. padding: top-value right-value bottom-value left-value;

设置顶部、右侧底部和左侧的padding值。

例子

<!DOCTYPE html>
<html>
  <head>
 <style>

   body{
   background-color:lightpink;
   }
 
   h3{
     border:2px solid green;
     background-color:lightblue; 
        }

   .a{padding-top:15px;}
   .b{padding-right:15px; }
   .c{padding-bottom:15px;}
   .d{padding-left:15px;}
   .e{padding: 15px}
   .f{padding: 15px 50px}
   .g{padding: 15px 20px 25px 30px}
 </style>

  </head>

  <body>
   <h3 class="a">Padding top 15px</h1>
   <h3 class="b">Padding right 15px</h1>
   <h3 class="c">Padding bottom 15px</h1>
   <h3 class="d">Padding left 15px</h1>
   <h3 class="e">Padding all 15px</h1>
   <h3 class="f">Padding top and bottom 15px, padding left and right 50px</h1>
   <h3 class="g">Padding top 15px, right 20px bottom 25px left 30px</h1>
  </body>
</html>

输出

如何在CSS中添加边距？

与padding类似，元素也有四条边，我们可以在这些边上设置margin。

在CSS中，我们有四个专门的margin属性用于各个面，还有一个速记法，可以在一行中设置margin空间。

填充的语法

a. margin-top: 值。

向上加页边距

b. margin-right:value;

向右的空白

c. margin-left:值。

左边的保证金

d. margin-bottom:数值。

底部空白

e. margin : value;

可以同时设置所有边距的速记法

f. margin : top-bottom-value left-right-value;

设置上下和左右的margin值。

g. margin : top-value right-value bottom-value left-value;

设置顶部、右侧底部和左侧的边距值。

例子

<!DOCTYPE html>
<html>
  <head>
 <style>
   body{
   background-color:lightpink;
   }

   h3{
     border:2px solid green;
     background-color:lightblue; 
       }
    
   .a{margin-top:15px;}
   .b{margin-right:15px; }
   .c{margin-bottom:15px;}
   .d{margin-left:15px;}
   .e{margin: 15px}
   .f{margin: 15px 50px}
   .g{margin: 15px 20px 25px 30px}

 </style>
  </head>

  <body>

   <h3 class="a">margin top 15px</h1>
   <h3 class="b">margin right 15px</h1>
   <h3 class="c">margin bottom 15px</h1>
   <h3 class="d">margin left 15px</h1>
   <h3 class="e">margin all 15px</h1>
   <h3 class="f">margin top and bottom 15px, margin left and right 50px</h1>
   <h3 class="g">margin top 15px, right 20px bottom 25px left 30px</h1>

  </body>
</html>

输出

结论 Padding vs Margin (相似但不相同)

padding和margin都是空间属性，用这两个属性我们只定义内容和元素周围的空间。如果没有边框，就很难分辨出一个元素是应用了 margin 还是 padding。

如果我们讨论这两个属性的工作原理，padding定义了元素的主要内容和它的边框之间的空间，而margin则表示元素边框之外的空间。

The postCSS Margin vs Padding:首先出现在TechGeekBuzz上。

avatar
文章
阅读
粉丝