如何在盒模型中使用外边距、边框和内边距完美搭配？

通常，我们使用盒模型来定义这些属性的使用方法。盒模型是一个用于定义盒子所包含的不同CSS属性的模型，包括 外边距、边框、内边距 和最重要的内容。CSS的盒模型通常定义了外边距、边框、内边距和内容这些属性。

在理解如何在盒模型中使用内边距、外边距、边框和内容完美搭配之前，让我们先了解一下当它们应用在一个容器上时，这些属性实际上有什么作用。

内容 - 内容是容器中最重要且必不可少的属性。它定义了特定文本容器想要传达的消息或容器的目的。

内边距 - 内边距是容器内部文本内容周围的空间。也可以说，它是内容与容器边界之间的内部空间。

语法

以下语法将展示如何使用内边距属性的简写和具体属性：

// Shorthand property
// sets the space around the all four sides of the content
padding: value;
// specific properties
// sets specified space on the specified side of the content
padding-top/left/right/bottom: value;

边框 - 边框，顾名思义，它是容器周围的轮廓，用于指定网页上特定容器所包含的区域。

下面的语法将展示如何使用边框属性 –

// Shorthand property
// specifies border on all four sides with given width, style and color

border: width style color;

// specific properties
// specifies border on the specified side of the container

border-top/left/right/bottom: width;
border-style: value;
border-color: value;

外边距 − 外边距与内边距类似，用于创建间距。内边距是边界和内容之间的间距，而外边距是指定两个相邻容器之间的间隙的容器外部的间距。

下面的语法将展示外边距属性的使用：

// Shorthand property
// sets the space around the all four sides of the container

margin: value;

// specific properties
// sets specified space on the specified side of the container

margin-top/left/right/bottom: value;

现在让我们理解并应用这些属性到一个特定的元素上，并观察它们在盒模型中的工作原理。

例子

下面的例子将解释如何将margin、padding、border和content属性组合在一起以适应盒模型。

<!DOCTYPE html>
<html>
<head>
   <style>
      .box-model{
         padding: 50px;
         border: 2px solid green;
         margin: 50px;
      }
   </style>
</head>
<body>
   <center>
      <h2> Using margin, border and padding to fit together in the box model </h2>
      <p> The changes in the below text will be visible once the box model properties applied on it. </p>
      <p class = "box-model">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
   </center> 
</body>
</html>

在上面的例子中，我们使用了Content，Padding，Margin和Border这些属性来适应一个盒子。一旦从样式中移除Padding和Margin，你就可以看到容器的外观变化。

让我们看一个更多的代码例子，在此例中我们将使用两个不同的容器，它们有不同的内容，并通过在特定的边上赋予特定的Margin和Padding来分开它们。

上面例子和这个例子的算法几乎相同。你只需要添加一个更多的内容容器，给它应用不同的样式，类名不一样，以便与第一个容器区分开。

例子

下面的例子将说明如何使用盒模型属性来区分两个具有不同内容的容器。

<!DOCTYPE html>
<html>
<head>
   <style>
      .box-model1{
         border: 2px solid green;
         padding: 30px;
         margin-bottom: 30px;
      }
      .box-model2{
         border: 2px solid red;
         padding: 30px;
         margin-top: 30px;
      }
   </style>
</head>
<body>
   <center>
      <h2> Using margin, border and padding to fit together in the box model </h2>
      <p> The changes in the below text will be visible once the box model properties applied on it. </p>
      <p class = "box-model1">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
      <p class = "box-model2"> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
   </center> 
</body>
</html>

在这个例子中，我们定义了两个不同的容器，并在它们中间添加了不同的内容，使用盒模型的属性margin和padding来区分它们。我们给上面的容器添加了相同的margin-bottom，给下面的容器添加了相同的margin-top，这样它们之间就会有一个双倍的相同数值的空间。

在这篇文章中，我们学习了如何在盒模型中同时使用margin、padding、border和content属性。我们通过两个在不同场景下的代码示例来实践了这些属性，以便更好地理解它们。