資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 設定元素內部的內邊距？
CSS 中的內邊距用於在元素內容周圍留出一些空間。您可以圍繞元素包含的任何型別的內容新增空間。內容可以是直接文字，也可以是其內部的任何其他巢狀元素。您可以輕鬆地新增要在內容與元素邊界之間設定的空間。內邊距是內部空間，僅圍繞內容以及元素的邊界和內容之間設定。
讓我們看看如何使用 CSS 在元素內部內容周圍新增內邊距。CSS 中有兩種方法可以在元素內部新增內邊距。您可以使用 CSS 的簡寫padding屬性或單獨的屬性來分別為每一側新增內邊距。
現在讓我們藉助程式碼示例，詳細瞭解以上兩種新增容器內部內邊距的方法。
使用簡寫 padding 屬性
在這種方法中，您只需要使用 padding 屬性和不同數量的值來設定元素內部的內邊距。
語法
以下語法將幫助您瞭解使用不同數量值的 padding 屬性：
padding: number_value px; // will set same padding as given to all sides. padding: number_value1 px number_value2 px; // will set forst value as top and bottom padding, while second as left and right. padding: number_value1 px number_value2 px number_value3 px; // will set first value as top padding, second as left and right and third as bottom padding. padding: number_value1 px number_value2 px number_value3 px number_value4 px; // will set all four values to all four different sides in order top -> right -> bottom -> left respectively.
現在讓我們實際應用這種方法，並使用 padding 屬性和不同數量的值來設定元素內部的內邊距，如語法中所述。
步驟
步驟 1 - 在第一步中，我們將定義一個包裝元素，其中包含所有其他元素。
步驟 2 - 在下一步中，我們將定義不同的元素，以使用不同數量的值來設定其內容周圍的 padding 屬性。
步驟 3 - 在最後一步中，我們將在上一步建立的元素內部定義內部容器，這些容器包含一些文字內容，我們將使用其父元素上的 padding 屬性在其周圍設定內邊距。
示例
以下示例將向您解釋 padding 屬性如何使用不同的值，以及它在使用這些值時的行為：
<!DOCTYPE html>
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 30px;
}
.container-2{
border: 2px solid aqua;
background-color: bisque;
margin: 0 5px;
padding: 20px 10px;
}
.container-3{
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 10px 20px 10px;
}
.container-4{
border: 2px solid aqua;
background-color: bisque;
margin: 0 5px;
padding: 25px 15px 5px 10px;
}
.inner-container{
border: 2px solid black;
padding: 5px;
}
</style>
</head>
<body>
<center>
<h2>Setting the padding inside an element using CSS</h2>
<p>The padding around the inner element of below containers is applied using the shorthand padding CSS property.</p>
<div class = "main-container">
<div class = "container-1">
<div class = "inner-container">
<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>
<div class = "container-2">
<div class = "inner-container">
<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>
<div class = "container-3">
<div class = "inner-container">
<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>
<div class = "container-4">
<div class = "inner-container">
<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>
</div>
</center>
</body>
</html>
在上面的示例中，我們使用了簡寫 padding 屬性來設定元素內部內容周圍的內邊距。我們使用不同數量的值來設定 padding 屬性，並檢視每個值的行為。
現在讓我們瞭解使用單獨屬性在元素內部設定內邊距的第二種方法。
使用單獨的 padding 屬性
我們可以使用每個側面的單獨 padding 屬性在元素內部設定內邊距，如下面的語法所示。
語法
此語法將向您展示如何為每一側使用不同的 padding 屬性來設定不同的內邊距：
padding-top: number_value px; padding-bottom: number_value px; padding-left: number_value px; padding-right: number_value px;
現在讓我們瞭解使用這種方法在元素內部設定內邊距的實際實現。
方法
此示例的方法與上述示例幾乎相同。您只需要將 padding 簡寫屬性替換為單獨屬性方法，並減少元素的數量。
示例
以下示例將說明程式碼中根據演算法進行的更改，以使用單獨屬性方法：
<!DOCTYPE html>
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
.container-2{
border: 2px solid aqua;
background-color: bisque;
margin: 0 5px;
padding-top: 30px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 10px;
}
.inner-container{
border: 2px solid black;
padding: 5px;
}
</style>
</head>
<body>
<center>
<h2>Setting the padding inside an element using CSS</h2>
<p>The padding around the inner element of below containers is applied using the shorthand padding CSS property.</p>
<div class = "main-container">
<div class = "container-1">
<div class = "inner-container">
<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>
<div class = "container-2">
<div class = "inner-container">
<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>
</div>
</center>
</body>
</html>
在此示例中，我們使用了單獨的 padding 屬性方法來設定元素內部內容容器周圍的內邊距，該容器包含文字內容。
結論
在本文中，我們學習了使用 CSS 在元素內部設定內邊距的兩種不同方法。我們透過使用每個方法的不同程式碼示例來實際實現它們，並詳細討論並理解了這兩種方法。
更新於： 2023年11月20日
171 次瀏覽
廣告