CSS - padding-left 属性

描述

CSS padding-left 属性用于设置元素内容框左侧的填充空间。

例

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

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


<!DOCTYPE html>
<html>
	 	 <head>
	 	 	 	 <title>CSS - Padding - padding-left</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-left property</h3>
	 	 	 	 <div>
	 	 	 	 	 	 <p style="padding-left: 50px; border: 1px solid #0b0b0b;">This element has a left padding of 50px.</p>
	 	 	 	 	 	 <p style="padding-left: 10%; border: 1px solid #0b0b0b;">This element has a left padding of 10%.</p>
	 	 	 	 	 	 <p style="padding-left: 30pt; border: 1px solid #0b0b0b;">This element has a left padding of 30pt.</p>
	 	 	 	 </div>
	 	 </body>
</html>

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

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

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

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


<!DOCTYPE html>
<html>
	 	<head>
	 	 	 <title>CSS - Padding - padding-left</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-left: inherit;
		 			 			 	 	 border: 1px solid #4CAF50;
	 	 	 	 			 	}
	 	 	 </style>
	 	</head>
	 	<body>
	 	 	 <h4>padding-left 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 left padding is inherited from the parent (p) and is 50px.
	 	 	 	 	 	 	 	 	 	 A child element where the left padding is inherited from the parent (p) and is 50px.
	 	 	 	 	 	 	 	 </p>
	 	 	 	 	 	 </div>
	 	 	 	 </div>
	 	</body>
</html>

本页