在 CSS 中使用 margin 和 padding

Subodh Poudel 2023年2月20日 2021年10月30日
  1. CSS 中 margin 的介紹
  2. CSS 中 padding 的介紹
在 CSS 中使用 margin 和 padding

在 CSS 中,marginpadding 可能看起來很相似,但它們是不同的。本教程將介紹 CSS 中的邊距和填充。然後我們將知道它們之間的區別,並學習何時使用邊距和填充。

CSS 中 margin 的介紹

在 CSS 中,邊距是任意兩個相鄰元素之間的空間。它是兩個相鄰元素的邊界之間的空間。任何元素的邊距不控制元素內部的空間。相反,它負責元素外部的空間。我們使用 margin 屬性來指定元素所有四個邊的邊距。我們在 margin 屬性中寫入四個值。這些值依次表示 margin-topmargin-rightmargin-bottommargin-left。我們可以說明如下。

element {
margin: 20px 20px 20px 20px;
}

上面的程式碼從所有四個邊設定元素的 20px 邊距。

當我們只使用這三個值時,中間的值代表 margin-leftmargin-right 屬性。如果 margin 屬性只有兩個值,第一個值表示頂部和底部的邊距,第二個值表示左右邊距。單個邊距值表示所有四個邊的邊距。

現在,讓我們演示一下什麼是邊距。例如,建立兩個帶有 redboxbluebox 作為它們的類的 div。為每個類提供 heightwidth 200px。將框的 background-color 設定為 redblue。然後,將頂部框 redboxmargin-bottom 屬性設定為 20px

下面的示例建立兩個紅色和藍色框。margin-bottom 屬性從底部方向的紅色框的邊框提供 20px 的空間。這意味著藍色框與紅色框的距離為 20px。如果我們刪除 margin-bottom 屬性,空間將被刪除,兩個框將自行連線。請注意,兩個框中的文字都附加到框的邊框,左側和頂部沒有空格。

示例程式碼:

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>
.redbox {
 height:200px;
 width: 200px;
 background-color:red;
 margin-bottom:20px;
}

.bluebox {
 height:200px;
 width: 200px;
 background-color:blue;
 color:white;
}

如果我們想更改網頁中元素的位置,可以使用 CSS 邊距。使用 margin 屬性,我們可以將元素向左、向右、頂部和底部移動。當我們需要指定兩個相鄰元素之間的距離時,就會用到邊距。我們在上面的例子中已經說明了它。我們甚至可以在元素中使用負邊距值來建立重疊效果。這些是 CSS 邊距的一些用例。

CSS 中 padding 的介紹

填充是元素邊框到元素內容之間的空間。它是元素內部的空間,它無法控制元素外部的區域。我們使用 padding 屬性來設定元素的填充。我們可以使用四個值、三個值、兩個值和一個值來表示元素的填充。填充表示在方向上類似於邊距表示。我們可以說明如下。

margin: 20px 20px 20px 20px;

上面的程式碼在所有方向上設定了 20px 的內邊距。

現在讓我們通過一個例子來演示 CSS padding 的實際用法。我們將在這裡使用與上面相同的 HTML 結構。在 CSS 中,選擇 div 並指定 200px 的高度和寬度以及 50pxpadding-top。選擇各個類併為它們提供 background-color 屬性的相應值。

在下面的示例中,兩個框是附加的,與上面的邊距示例不同。但是,我們可以在兩個框中的每個文字上方看到一些空間。這就是 padding 的作用。將 padding-top 屬性設定為 20px 會增加 50px 從文字到框頂部的空間。

示例程式碼:

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>
div{
 height:200px;
 width: 200px;
 padding-top:50px;
}
.redbox {
 background-color:red;
}

.bluebox {
 background-color:blue;
 color:white;
}

我們可以使用 CSS padding 來指定元素內容與其邊框之間的空間。我們還可以使用填充來增加元素的大小。當我們增加 padding 值時,內容和邊框之間的空間會增加。結果,元素的大小也會增加,從而保持內容的大小不變。

Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn