CSS padding-left 属性
CSS padding-left 属性
CSS padding-left 属性定义一个元素的左填充部分的宽度。它指定了元素内容左侧到边框左侧的距离,包括可选的边框。
语法
padding-left: length | initial | inherit;
- length:指定元素左内边距的大小。可以用像素(px)、百分比(%)、em或任何其他长度单位。
- initial:将此属性设置为其默认值。
- inherit:从父元素继承此属性的值。
实例
<!DOCTYPE html>
<html>
<head>
<style>
.box {
padding-left: 20px;
background-color: #dcdcdc;
}
</style>
</head>
<body>
<h2>这是标题</h2>
<div class="box">
<p>这是一个段落。</p>
</div>
</body>
</html>
这个示例设置了一个名为"box"的div元素的左内边距为20像素,并设置了一个淡灰色的背景色。由于填充从文本而不是元素边框开始,填充也会增加元素的总宽度和高度。
注意事项
- 当元素有边框的时候,左填充会放置在边框内部。如需在边框外部设置填充,请使用 margin-left。
- 当您想要为多个方向指定填充时,可以使用 padding 属性(padding: top right bottom left)。
- 如果不想让填充影响元素的总宽度或高度,请使用 box-sizing 属性,并将其值设置为 border-box。
总结
CSS padding-left 属性指定了元素的左填充部分的宽度。您可以使用像素、百分比或其他长度单位来定义填充的大小。如果元素有边框,请注意左填充放置在边框内部。如果不想让填充影响元素的宽度或高度,请使用 box-sizing 属性,并将其值设置为 border-box。