Question

我知道边距和填充之间的区别，但我对此代码存在问题，并且不了解区分边距和填充的区别。

.container {
  border: 1px solid #d4d4d4;
  width: 340px;
  text-align: center;
}

.facts {
  border: 1px solid #d4d4d4;
  width: 300px;
  margin: 0 auto;
  margin-top: 15px;
  text-align: left;
}

<div class="container">
  <!-- your favorite animal's name goes here -->
  <h3 id="name">Sharpei</h3>
  <!-- your favorite animal's image goes here -->
  <img src="http://i61.servimg.com/u/f61/12/41/85/52/sharpe10.jpg" alt="Sharpei">
  <div class="facts">
    <!-- your favorite animal's interesting fact goes here -->
    <p class="presentation">Le Shar-Pei a ensuite été entrainé au combat, mais d'autres races plus puissantes et plus agressives se sont peu à peu substituées à lui.</p>
    <ul>
      <!-- your favorite animal's list items go here -->
      <li><span>Scientific name</span>: Shar-peï</li>
      <li><span>Average Length</span>: 45cm</li>
      <li><span>Average Lifespan</span>: 11 years</li>
      <li><span>Habitat</span>: My house </li>
    </ul>
    <!-- your favorite animal's description goes here -->
    <p>Le Shar-peï, Shar-pei ou sharpeï est un chien d'origine chinoise qui se caractérise par sa peau ample qui retombe en plis.</p>
  </div>
</div>

文本粘贴到边框，我想添加填充以在边框和文本之间添加空格，但是当我使用padding: 5px;执行此操作时，它会更改框的宽度。

有人可以帮忙/解释一下吗？

由于

Answer 1

这是因为默认情况下，元素的渲染宽度等于宽度加上任何边框或填充。但是，您可以使用box-sizing属性更改此行为。尝试添加：

padding: 20px;
box-sizing: border-box;

见：Fiddle; box-sizing

Answer 2

元素的填充控制元素及其边框之间空间的数量。

元素的边距控制元素边框与周围元素之间的空间量。

Answer 3

基本上，您需要将元素定义为一个框，然后为其提供所需的填充。

尝试添加：

`.facts{display: inline-block; width : 300px; padding: 50 px; margin: 100px;}`

在这里，您将看到框内添加的填充以及相邻元素或框的100px边距。此外，要测试它，您可能需要添加背景颜色。

在此示例中，边距和填充之间的差异

3 个答案: