Margin or padding what is recommended?

Question

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

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

#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 contains the space between content and the border, but margin contains space of outside the border. below image can introduce the difference

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.

Answer 2

Answer: When to use margin vs padding in CSS

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

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

Answer 3

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.

But if you go:

p { padding: 10px 0; }

The contents will be 20px separated.