CSS 边框与内容之间的间距/ 边框到内容的距离

在本文中，我们将介绍CSS中边框与内容之间的间距问题，以及如何调整边框与内容的距离。

阅读更多：CSS 教程

1. 边框与内容的默认间距

在CSS中，边框与内容之间有一定的默认间距。这是由于盒模型的不同部分所导致的。在标准盒模型中，一个盒子的总宽度包括了内容宽度、内边距、边框和外边距。因此，边框与内容之间的间距是由内边距决定的。

示例1：

.box {
  width: 200px;
  border: 1px solid black;
  padding: 10px;
}

<div class="box">
  <p>这是一段文本内容。</p>
</div>

在上述示例中，.box元素具有200px的宽度，边框设置为1px的实线边框，内边距设置为10px。这意味着边框与内容之间的间距为10px。

2. 调整边框与内容的间距

如果我们想要调整边框与内容之间的间距，可以通过以下几种方法来实现。

2.1 使用负内边距

负内边距是一种常用的方法，可以减小边框与内容之间的间距。

示例2：

.box {
  width: 200px;
  border: 1px solid black;
  padding: 10px;
  margin: 20px;
}

.box p {
  margin: 0;
}

.box span {
  padding: 20px;
  background-color: lightgray;
}

<div class="box">
  <p><span>这是一段文本内容。</span></p>
</div>

在上述示例中，我们为.box元素的内部内容设置了一个<span>标签，并给它添加了20px的内边距。为了减小边框与内容之间的间距，我们对.box p元素应用了margin: 0;来重置默认的外边距。然后，通过设置负内边距padding: -20px;来减小边框与内容的间距。

2.2 使用包裹元素

另一种方法是使用一个额外的包裹元素来实现调整边框与内容的间距。

示例3：

.wrapper {
  display: inline-block;
  border: 1px solid black;
  padding: 10px;
}

.content {
  margin: 20px;
}

.content p {
  margin: 0;
}

<div class="wrapper">
  <div class="content">
    <p>这是一段文本内容。</p>
  </div>
</div>

在上述示例中，我们创建了一个额外的包裹元素.wrapper，并给它添加了1px的实线边框和10px的内边距。然后，再在.wrapper内部创建一个.content元素，通过设置margin: 20px;来调整边框与内容之间的间距。最后，为.content p元素添加margin: 0;来重置默认的外边距。