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

I have made some code and css, now I'm learning to understand them..

我已经制作了一些代码和CSS,现在我正在学习理解它们。

What is the difference if I use margin or padding? What is recommended to use on my <p> tag?

如果我使用保证金或填充有什么区别?建议在我的

标签上使用什么?

I'm using margin now, but margin is for the outside of an element, why whould I use that if padding is for the space between the content and border.

我现在正在使用保证金,但保证金是针对元素的外部的,如果填充是针对内容和边框之间的空间,为什么我会使用它。

So let's start what I have:

那么让我们开始我所拥有的:

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

My CSS looks like this

我的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;
    }

3 个解决方案

#1

One important difference (asides from margin means outside and padding means inside): Margins of adjacent elements overlap, when paddings don't. Take this example:

一个重要的区别(除了边缘意味着外部和填充意味着内部):相邻元素的边距重叠,当填充没有。举个例子:

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

If you use margin:

如果您使用保证金:

p { margin: 10px 0; }

The space between these 2 paragraphs will be 10px.

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

But if you go:

但是如果你去:

p { padding: 10px 0; }

The contents will be 20px separated.

内容将是20px分开。

#2

padding contains the space between content and the border, but margin contains space of outside the border. below image can introduce the difference

padding包含内容和边框之间的空格,但margin包含边框外的空格。下图可以介绍差异

Summary

So, in brief, margins separate elements from each other and away from page edges, adding space outside of elements. Padding adds space inside of an element, separating the element’s content from the edges of the targeted element.

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

#3

Answer: When to use margin vs padding in CSS

答:何时在CSS中使用margin和padding

Quoting:

Margin is on the outside of block elements while padding is on the inside.

边距位于块元素的外侧,而填充位于内部。

Use margin to separate the block from things outside it

使用margin将块与其外部的东西分开

Use padding to move the contents away from the edges of the block.

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