資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 設定元素周圍的填充？
CSS 中的 padding 屬性用於設定內容與容器邊界之間的內部空間。使用 padding 屬性定義的空間將設定在容器的內容周圍，而不是容器本身周圍。它將設定容器內部的空間，而不是外部空間。
讓我們看看使用 CSS 在元素周圍應用填充的不同方法。
如下所示，我們可以使用 CSS 設定元素內容周圍填充的兩種方法：
為每一側使用單獨的 padding 屬性。
為所有側使用簡寫 padding 屬性。
讓我們透過單獨的程式碼示例瞭解以上在 CSS 中應用 padding 屬性的方法。
為每一側使用單獨的屬性
在這種方法中，我們將使用單獨的 padding 屬性來定義和應用元素周圍的填充。單獨的屬性將僅將填充應用於元素的特定一側。
語法
以下語法將顯示如何為容器的每一側使用單獨的 padding 屬性：
padding-top: padding top value padding-bottom: padding bottom value padding-left: padding left value padding-right: padding right value
現在讓我們瞭解如何使用單獨的 padding 屬性來定義和應用容器內容周圍的不同填充。
演算法
步驟 1 - 在第一步中，我們將定義兩個不同的 HTML 元素以檢視單獨 padding 屬性的用法。
步驟 2 - 在下一步中，我們將對一個元素應用相同值的單獨 padding 屬性，對另一個元素應用不同值的單獨 padding 屬性。
步驟 3 - 在最後一步中，我們將為這兩個元素新增邊框，並檢視內容與容器邊界之間的間隙。
示例
以下示例將解釋如何使用 CSS 中的單獨 padding 屬性在元素內容周圍應用填充：
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
border: 2px solid bisque;
background-color: aqua;
margin: 0 20px;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 20px;
padding-right: 10px;
}
.container-2{
border: 2px solid aqua;
background-color: bisque;
margin: 0 20px;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<center>
<h3>The padding around the content of below containers is applied using the individual CSS properties.</h3>
<div class = "main-container">
<div class = "container-1">
<p><strong>Container with different padding values for different sides </strong> </p>
<p>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>
</div>
<div class = "container-2">
<p><strong>Container with same padding values for all sides </strong> </p>
<p>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>
</div>
</div>
</center>
</body>
</html>
在上面的示例中，我們對兩個不同的容器使用了具有不同值和相同值的單獨 padding CSS 屬性，以檢視這些屬性的實現，這些屬性為不同的側分配不同的填充，併為元素的所有側分配相同的填充。
為所有側使用簡寫 padding 屬性
要將填充應用於元素的所有側，可以使用簡寫屬性 `padding`。它將設定內容所有側周圍的填充。此簡寫屬性可以以四種不同的方式使用，如下所示。
使用單個值 - 簡寫 padding 屬性可以僅使用一個值。容器內容所有側周圍的填充將設定為該特定值。
語法
padding: padding_value; // it will set the same padding around all sides.
使用兩個值 - 您也可以將 padding 屬性與兩個值一起使用。它將第一個值設定為頂部和底部填充，第二個值設定為具有相同值的左側和右側填充。
語法
padding: top/bottom_padding_value left/right_padding_value;
使用三個值 - 如果您將簡寫屬性與三個值一起使用，它將第一個值設定為頂部填充，第二個值設定為左側和右側填充，第三個值設定為底部填充。
語法
padding: top_padding left/right_padding bottom_padding
使用四個值 - 當 padding 屬性與四個值一起使用時，它將為容器的所有不同側分配值。第一個值對應於頂部填充，第二個值對應於右側填充，第三個值對應於底部填充，第四個值對應於左側填充值。
語法
padding: top right bottom left
現在讓我們使用所有上述語法實現 padding 屬性，並透過程式碼示例在實踐中詳細瞭解它。
演算法
此示例的演算法與前一個示例幾乎相同。您只需要向 HTML 文件新增兩個元素，並使用上述語法將填充應用於這些元素的所有側。
示例
以下示例將說明如何使用具有不同數量值的簡寫 padding 屬性，如上所述：
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 20px;
}
.container-2{
border: 2px solid aqua;
background-color: bisque;
margin: 0 5px;
padding: 15px 10px;
}
.container-3{
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 30px 15px 30px;
}
.container-4{
border: 2px solid aqua;
background-color: bisque;
margin: 0 5px;
padding: 20px 10px 30px 5px;
}
</style>
</head>
<body>
<center>
<h3>The padding around the content of below containers is applied using the shorthand padding CSS property.</h3>
<div class = "main-container">
<div class = "container-1">
<p><strong>Container with one single padding value for all sides</strong></p>
<p>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>
</div>
<div class = "container-2">
<p><strong>Container with two values for the padding property </strong></p>
<p>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>
</div>
<div class = "container-3">
<p><strong>Container with three values for the padding property </strong></p>
<p>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>
</div>
<div class = "container-4">
<p><strong>Container with four values for the padding property </strong></p>
<p>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>
</div>
</div>
</center>
</body>
</html>
在上面的示例中，我們使用了不同數量的值的 padding 屬性，甚至使用了不同的值來將不同的填充應用於容器元素的每一側，以檢視使用任何數量的值（但不超過四個，不少於一個）的 padding 屬性之間的區別。
結論
在本文中，我們學習了 CSS 中的 padding 屬性，並透過每個用例的程式碼示例瞭解了它在不同用例中的用法。我們討論了單獨的 padding 屬性和簡寫 padding 屬性，並透過使用程式碼示例在實踐中詳細瞭解它們。
81 次瀏覽
