CSS - Padding
padding属性允许您指定元素内容与其边框之间应显示的空间大小 -
此属性的值应为长度，百分比或单词inherit 。 如果值是inherit ，则它将具有与其父元素相同的填充。 如果使用百分比，则百分比是包含框。
以下CSS属性可用于控制列表。 您还可以使用以下属性为框的每一侧的填充设置不同的值 -
padding-bottom指定元素的底部填充。
padding-top指定元素的顶部填充。
padding-left指定元素的左边距。
padding-right指定元素的右边距。
padding用作前面属性的简写。
现在，我们将看到如何将这些属性与示例一起使用。
填充底部属性
padding-bottom属性设置元素的底部填充（空格）。 这可以采用％的长度值。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style = "padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
</body>
</html>
它会产生以下结果 -
新页面打开填充顶部属性
padding-top属性设置元素的顶部填充（空格）。 这可以采用％的长度值。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
</body>
</html>
它会产生以下结果 -
新页面打开填充左侧属性
padding-left属性设置元素的左边距（空格）。 这可以采用％的长度值。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style = "padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>
</body>
</html>
它会产生以下结果 -
新页面打开填充权属性
padding-right属性设置元素的右边距（空格）。 这可以采用％的长度值。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>
</html>
它会产生以下结果 -
新页面打开填充属性
padding属性设置元素的左，右，上和下填充（空格）。 这可以采用％的长度值。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style = "padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>
</html>
它会产生以下结果 -
新页面打开
<上一篇.CSS - Lists
CSS - Cursors.下一篇>
