css - 推荐的边距或填充是什么？

Question

我已经制作了一些代码和 css，现在我正在学习理解它们..

如果我使用边距或填充有什么区别？建议在我的 <p> 上使用什么标签？

我现在正在使用边距，但边距用于元素的外部，如果填充用于内容和边框之间的空间，我为什么要使用它。

那么让我们开始吧:

<div id="MainContainer">
  <section>
    <article>
      <h1>Title</h1>
        <p> text text text text text </p>
    </article>
  </section>
</div>

我的 CSS 看起来像这样

#MainContainer {
    width:980px; 
    margin:0 auto; 

    background-color:#FFF; 

    }

article {
    text-align:left;
    color:#000000;
    padding-left: 205px;
    padding-bottom: 25px;
}

section {

    margin-left: 10px;
    margin-right: 10px;
    height:350px;
    }
p {
    margin: 10px 0px 15px 0px;
    }

Answer 1

一个重要的区别(除了 margin 表示外部，padding 表示内部):相邻元素的边距重叠，而 paddings 不重叠.举个例子:

<p>Lorem ipsum</p>
<p>Dolor sic amet</p>

如果您使用 margin :

p { margin: 10px 0; }

这两段之间的间距为10px。

但是如果你去:

p { padding: 10px 0; }

内容将被20px分隔。