数据结构
网络
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 次浏览
广告