保证金或填充什么是推荐的？

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

padding包含内容与border之间的空格， 但margin包含边界外的空间。下图可以介绍差异

摘要

因此，简而言之，边距将元素彼此分开并远离页面边缘，从而在元素之外添加空间。填充在元素内部添加空间，将元素的内容与目标元素的边缘分开。

Answer 2

答案：When to use margin vs padding in CSS

引用：

  

边距是块元素的外部，而填充是在   内部。

     

使用边距将块与其外部的内容分开

     

使用填充将内容从块的边缘移开。

Answer 3

一个重要的区别（除边缘意味着外，填充意味着内）：相邻元素的边距重叠，当填充不。举个例子：

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

如果您使用保证金：

p { margin: 10px 0; }

这两段之间的空格将 10px 。

但如果你去了：

p { padding: 10px 0; }

内容将 20px 分开。