CSS 填充


目录

    显示目录


填充用于在元素内容周围、任何定义的边框内创建空间。


This element has a padding of 70px.

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
div {
  padding: 70px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Padding</h2>
<div>This element has a padding of 70px.</div>

</body>
</html>



CSS 填充

CSS padding 属性用于生成周围的空间 元素的内容,在任何定义的边界内。

使用 CSS,您可以完全控制填充。有属性 用于设置元素每一侧的填充(顶部、右侧、底部和左侧)。


填充 - 各个侧面

CSS 具有指定每个元素的填充的属性 元素的侧面:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

所有填充属性都可以具有以下值:

  • length - 指定内边距,单位为 px、pt、cm 等。

  • % - 指定包含元素宽度的百分比填充

  • 继承 - 指定填充应从父元素继承

注意:不允许使用负值。

例子

为 <div> 元素的所有四个边设置不同的填充:

 div {	padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
</style>
</head>
<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>

</body>
</html>




填充 - 速记属性

为了缩短代码,可以在中指定所有填充属性 一项财产。

padding 属性是以下各个属性的简写属性 填充属性:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

那么,它的工作原理如下:

如果 padding 属性有四个值:

padding: 25px 50px 75px 100px; 
  • 顶部内边距为 25px

  • 右内边距为 50px

  • 底部内边距为 75px

  • 左内边距为 100px

例子

使用具有四个值的 padding 简写属性:

 div {	  padding: 25px 50px 75px 100px;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 4 values</h2>

<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.</div>

</body>
</html>


如果 padding 属性具有三个值:

padding: 25px 50px 75px;
  • 顶部内边距为 25px

  • 左右内边距均为 50px

  • 底部内边距为 75px

例子

使用具有三个值的 padding 简写属性:

 div {	  padding: 25px 50px 75px;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 3 values</h2>

<div>This div element has a top padding of 25px, a right and left padding of 50px, and a bottom padding of 75px.</div>

</body>
</html>


如果 padding 属性有两个值:

padding: 25px 50px;
  • 顶部和底部内边距均为 25px

  • 左右内边距均为 50px

例子

使用具有两个值的 padding 简写属性:

 div {	  padding: 25px 50px;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 2 values</h2>

<div>This div element has a top and bottom padding of 25px, and a right and left padding of 50px.</div>

</body>
</html>


如果 padding 属性只有一个值:

padding: 25px;
  • 所有四个内边距均为 25px

例子

使用具有一个值的 padding 简写属性:

 div {	  padding: 25px;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 1 value</h2>

<div>This div element has a top, bottom, left, and right padding of 25px.</div>

</body>
</html>



填充和元素宽度

CSS width 属性指定元素内容区域的宽度。这 内容区域是元素的内边距、边框和边距内的部分 (盒子模型)。

因此,如果一个元素具有指定的宽度,则添加到该元素的填充将 添加到元素的总宽度。这通常是不希望有的结果。

例子

此处,<div> 元素的宽度为 300px。 但是,<div> 元素的实际宽度将为 350px (300px + 左内边距 25 像素 + 右内边距 25 像素):

 div {
  width: 300px;
  padding: 25px;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Padding and element width</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>

</body>
</html>


为了将宽度保持在 300px,无论填充量是多少,您都可以使用 box-sizing 属性。这会导致元素保持其实际宽度;如果 如果增加填充,可用的内容空间将会减少。

例子

使用 box-sizing 属性将宽度保持在 300px,无论 填充量:

 div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Padding and element width - with box-sizing</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>

</body>
</html>



更多示例

设置左内边距

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-left: 2cm;
}
p.padding2 {
  padding-left: 50%;
}
</style>
</head>
<body>

<h1>The padding-left Property</h1>

<p>This is a text with no left padding.</p>
<p class="padding">This text has a left padding of 2 cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>

</body>
</html>


此示例演示如何设置 <p> 元素的左内边距。

设置正确的填充

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-right: 2cm;
}

p.padding2 {
  padding-right: 50%;
}
</style>
</head>
<body>

<h1>The padding-right Property</h1>

<p>This is a text with no right padding. This is a text with no right padding. This is a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right padding of 50%. This text has a right padding of 50%.</p>

</body>
</html>


此示例演示如何设置 <p> 元素的右填充。

设置顶部内边距

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-top: 2cm;
}

p.padding2 {
  padding-top: 50%;
}
</style>
</head>
<body>

<h1>The padding-top Property</h1>

<p>This is a text with no top padding. This is a text with no top padding. This is a text with no top padding.</p>
<p class="padding">This text has a top padding of 2 cm. This text has a top padding of 2 cm. This text has a top padding of 2 cm.</p>
<p class="padding2">This text has a top padding of 50%. This text has a top padding of 50%. This text has a top padding of 50%.</p>

</body>
</html>


此示例演示如何设置 <p> 元素的顶部填充。

设置底部内边距

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-bottom:2cm;
}

p.padding2 {
  padding-bottom:50%;
}
</style>
</head>
<body>

<h1>The padding-bottom Property</h1>

<p>This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 50%. This text has a bottom padding of 50%. This text has a bottom padding of 50%.</p>

</body>
</html>


此示例演示如何设置 <p> 元素的底部填充。



所有 CSS 填充属性

padding

用于在一个声明中设置所有填充属性的简写属性

padding-bottom

设置元素的底部填充

padding-left

设置元素的左内边距

padding-right

设置元素的右填充

padding-top

设置元素的顶部填充