如何使用margin、border和padding使盒子模型中的元素完美配合?


通常,我們使用盒子模型來定義所有這些屬性,並將它們組合在一起使用。盒子模型是一個用於定義盒子包含的不同 CSS 屬性的模型,例如margin、border、padding以及最重要的內容。CSS 中的盒子模型通常定義 margin、border、padding 和內容等屬性。

在瞭解如何使用 padding、margin、border 和內容在盒子模型中完美配合之前,讓我們先了解一下這些屬性應用於容器時實際的作用。

內容 - 內容是最重要且容器必須具有的屬性。它定義了特定文字容器想要傳遞的資訊或容器的目的。

填充 (Padding) - 填充是容器內內容文本週圍的空間。也可以說它是內容與容器邊界之間的內部空間。

語法

下面的語法將向您展示使用簡寫和特定屬性的 padding 屬性:

// 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;

邊框 (Border) - 正如名稱所示,邊框是容器邊界周圍的輪廓,用於指定網頁上特定容器包含的區域。

下面的語法將展示如何使用 border 屬性:

// 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;

外邊距 (Margin) - 外邊距也用於提供空間,就像填充一樣。外邊距和填充之間存在差異:填充是邊界和內容之間的空間,而外邊距是容器外部的空間,用於指定兩個相鄰容器之間的間隙。

下面的語法將展示如何使用 margin 屬性:

// 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 和內容屬性組合在一起以適應盒子模型:

<!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>

在上面的示例中,我們一起使用了內容、填充、外邊距和邊框以適應一個盒子。您可以看到,一旦從其樣式中刪除填充和外邊距,以及當它包含這些樣式時,容器的外觀差異。

讓我們再看一個程式碼示例,在這個示例中,我們將使用兩個具有不同內容的不同容器,並透過在特定側面上設定特定的外邊距和填充來分隔它們。

上面這個例子和這個例子的演算法幾乎相同。您只需要新增另一個具有不同類的內容容器,以便對其應用與第一個容器不同的樣式。

示例

下面的示例將說明如何使用盒子模型屬性來區分具有不同內容的兩個容器:

<!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 屬性。我們藉助於在不同場景下的兩個程式碼示例,看到了這些屬性的實際應用,以便更好地理解它們。

更新於:2023年8月31日

瀏覽量:138

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告