CSS - padding-top 属性

描述

padding-top 属性用于设置元素内容框顶部的填充空间。

例

下面是一个示例，其中所有可以传递给 padding-top 属性的不同值：

您可以编辑并尝试使用“编辑并运行”选项运行此代码。


<!DOCTYPE html>
<html>
	 	 <head>
	 	 	 	 <title>CSS - Padding - padding-top</title>
	 	 	 	 <meta charset="UTF-8">
	 	 	 	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 	 	 	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	 	 </head>
	 	 <body>
	 	 	 	 <h3>padding-top property</h3>
	 	 	 	 <div>
	 	 	 	 	 	 <p style="padding-top: 50px; border: 1px solid #0b0b0b;">This element has a top padding of 50px.</p>
	 	 	 	 	 	 <p style="padding-top: 10%; border: 1px solid #0b0b0b;">This element has a top padding of 10%.</p>
	 	 	 	 	 	 <p style="padding-top: 30pt; border: 1px solid #0b0b0b;">This element has a top padding of 30pt.</p>
	 	 	 	 </div>
	 	 </body>
</html>

继承 - 当您希望子元素的顶部填充与其父元素的顶部填充匹配时，请使用属性 inherit。

注意：继承值只能用于子元素，而不能用于父元素。

下面是一个示例，其中子元素的填充顶部继承自父元素-

您可以编辑并尝试使用“编辑并运行”选项运行此代码。


<!DOCTYPE html>
<html>
	 	<head>
	 	 	 <title>CSS - Padding - padding-top</title>
	 	 	 <meta charset="UTF-8">
	 	 	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 	 	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	 	 	 <style>
	 	 	 	 	.container {
	 	 	 	 	 	 padding: 50px;
	 	 	 	 	 	 border: 1px solid #4CAF50;
	 	 	 	 			 	}
	 	 	 	 	.box {
	 	 	 	 	 	 padding-top: inherit;
		 			 			 	 	 border: 1px solid #4CAF50;
	 	 	 	 			 	}
	 	 	 </style>
	 	</head>
	 	<body>
	 	 	 <h4>padding-top property - inherit</h4>
	 	 	 	 <div class="container">
	 	 	 	 	 	 <div class="box">
	 	 	 	 	 	 	 	 <p>The padding is 50px for parent element.</p>
	 	 	 	 	 	 	 	 <p class="example">
	 	 	 	 	 	 	 	 	 	 A child element where the top padding is inherited from the parent (p) and is 50px.
	 	 	 	 	 	 	 	 	 	 A child element where the top padding is inherited from the parent (p) and is 50px.
	 	 	 	 	 	 	 	 </p>
	 	 	 	 	 	 </div>
	 	 	 	 </div>
	 	</body>
</html>

打印本页