Margin vs. Padding

Question

i've been seen both margin and padding are used to leave a space between divs, tables, sections, etc. So what's the real difference between them?

Answer 1

_____________________
| margin. |
| ____________. |
|. |. padding |. |
|. |. _______ |. |
|. | [content]. |. |
|. |. ^^^^^^^^ |. |
|. |____________|. |
|. |
|____________________|

Let the outermost Box be the body (parent).
Let the innermost Box (content box)be the actual element.

Margin is the distance from the parent element form which the DIV starts, that is the distance outside the box .
Padding is the distance from which the content of your DIV starts.

More simply, margin is the distance outside the DIV box whereas padding is the distance inside the box.

if you need to see this in action,
1) Create a Blank html page with a DIV element inside the BODY tag. Add some text inside the DIV.
2) In CSS of the DIV add a border using "border-style: solid;".
3) The change the values of the 'margin' and 'padding' to see the change in action.

Answer 2

Basically padding adds space inbetween the edges of your element and the content, and margin adds space outside the element.

https://code.sololearn.com/WKXj4MJy1M5H/#css

Answer 3

Content>padding>border>margin
that is the order in which spaces are made available for a content.
You provide padding for the content to give it a 'breathing space'. Margin gives the border surrounding the content space also.

Answer 4

They have some differences:
* Margin is outer space of an element, while Padding is inner space of an element.
* Margin is the space outside the border of an element, while Padding is the space that is inside the border of it.
* Margin can be value auto: margin: auto, but you can't give Padding the value of auto.
* Margin can give value of positive or negative (or zero), otherwise, Padding must be positive (or zero).
* (In all tags but) Especially in navigation bars, Padding is a part of element that accepts style changes. When you style an element, changes not happens to Margin, but the space that Padding has created will be change. For example if you set background-color of an element that have both margin and padding to yellow, it's padding background color will be yellow while margin not.
Tip: You can see these differences on some tags that you use to control other tags; like div and span, or section and article. Also is good to see changes in navigation bars.

Answer 5

Say you have a div with yellow background and some text. padding adds "margin" inside - gives some yellow background around the text. Margin would add more space around the whole thing so it would not extend that background.