CSS属性设置div内文本的内边距

在本文中，我们将介绍如何使用CSS属性来设置div元素内文本的内边距（padding）。

阅读更多：CSS 教程

什么是内边距？

在CSS中，内边距（padding）指的是元素内容与其边界之间的空白区域。通过设置内边距，可以使文本离边界有一定的距离，从而改变元素的外观。

使用padding属性设置内边距

要设置div内文本的内边距，我们可以使用CSS的padding属性。padding属性有四个值，分别表示上、右、下、左四个方向的内边距大小。具体使用方式如下：

div {
  padding: 10px 20px 10px 20px;
}

上述代码表示设置div元素的内边距，上方和下方的内边距为10px，左方和右方的内边距为20px。也可以使用缩写形式来设置内边距：

div {
  padding: 10px 20px;  /* 上下10px，左右20px */
}

此时，上方和下方的内边距仍为10px，而左方和右方的内边距则和上方相同。

使用单独属性设置内边距

除了padding属性之外，我们还可以使用各个方向的单独属性来设置内边距。具体使用方式如下：

上边界内边距：padding-top
右边界内边距：padding-right
下边界内边距：padding-bottom
左边界内边距：padding-left

div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

上述代码表示分别设置div元素上、右、下、左方向的内边距大小。

使用百分比设置内边距

除了使用固定的像素值来设置内边距，我们还可以使用百分比来设置。使用百分比可以根据父元素的大小自动调整内边距的大小。

div {
  padding: 10% 20% 10% 20%;
}

上述代码表示设置div元素内边距为其父元素宽度和高度的10%。

示例说明

下面通过一个示例来说明如何使用CSS属性设置div内文本的内边距。

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      .container {
        width: 300px;
        height: 200px;
        background-color: lightgray;
      }
      .example {
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="example">
        <h1>这是一个示例标题</h1>
        <p>这是一个示例段落，用于说明如何使用CSS属性设置div内文本的内边距。</p>
      </div>
    </div>
  </body>
</html>

上述示例中，我们创建了一个div元素，并设置其宽度为300px，高度为200px，背景色为浅灰色。在该div元素内部，我们又创建了一个带有内边距的div元素，内边距大小为20px。该带有内边距的div元素中包含了一个标题和一个段落。运行上述代码，我们可以看到内边距会产生一定的空隙，使得文本与边界之间有一定的距离。