資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 CSS 中定義各個側面的填充
CSS 允許我們為元素設定特定的內邊距。我們可以輕鬆地為元素的各個側面指定內邊距大小。padding-top、padding-right、padding-bottom 和 padding-right 屬性分別定義頂部、右側、底部和左側的內邊距。還可以透過按順時針方向指定值來使用 padding 速記屬性來實現相同的結果。
語法
CSS 內邊距屬性的語法如下 -
Selector {
padding-top: /*value*/
padding-right: /*value*/
padding-bottom: /*value*/
padding-left: /*value*/
}
設定速記內邊距屬性
還可以使用速記內邊距屬性來設定內邊距。這透過只提一下 padding 而不是使用以下所有屬性來為元素的每個側面設定內邊距 -
padding-top padding-right padding-bottom padding-left
示例
讓我們看一個示例 -
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 2em 1em;
padding: 3%;
background-color: plum;
letter-spacing: 0.05em;
}
span {
padding: 0 53%;
border-right: dashed;
background-image: linear-gradient(to right, lavenderblush, lightblue);
font-size: 1.4em;
font-style: italic;
}
</style>
</head>
<body>
<h2>Badminton</h2>
<article>
<span>Badminton is a game played between two or four players. Both teams have to make points in order to defeat the other team.</span> Badminton as battledore and shuttlecock is played with sides across a string suspended some five feet above the ground. The sport tests player’s athletic stamina, agility and good motor coordination skills.
</article>
</body>
</html>
單獨設定內邊距
此處，我們考慮了所有單個側面的所有內邊距屬性 -
padding-left: 30px; padding-top: 44px; padding-bottom: 60px; padding-right: 70px;
示例
讓我們看這個示例 -
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 400px;
padding-left: 30px;
padding-top: 44px;
padding-bottom: 60px;
background-image: linear-gradient(to bottom, oldlace, lightblue);
border: thin solid;
text-align: center;
}
div > div {
padding-right: 70px;
}
</style>
</head>
<body>
<h2>Basketball</h2>
<div>Basketball is a team sport played by two teams of five players each. It is played on a rectangular court.
<div>The players try to score by shooting a ball through a hoop elevated 10 feet above the ground.
</div>
</div>
</body>
</html>
更新於： 01-11-2023
83 次瀏覽
廣告