In css when to use padding and when to use margin

Question

With reference to this, if I want to align a div to left by 20px, I can use both padding-left or margin-left. Which one is preferred and in which case?

<div style="padding-left: 20px;">
    Move me by 20px left!
</div>

<div style="margin-left: 20px;">
    Move me by 20px left!
</div>

Apply `background-color:red;` to both. See what happens. Decide for yourself. — Niet the Dark Absol, Nov 10 '17 at 19:34
it all comes clear when the background or border element is styled and when among other contents. margin is to put space between elements, padding is mostly used to push contents away from edges for visual clarity — G-Cyrillus, Nov 10 '17 at 19:37
Padding is space inside an element. Margin is space outside an element. — Nawed Khan, Nov 10 '17 at 19:45
Refer to https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap — Adam, Nov 10 '17 at 19:49
Your question title typed into Google verbatim yields a popular duplicate, plus lots of other results. — CBroe, Nov 10 '17 at 19:51

score 2 · Accepted Answer · answered Nov 10 '17 at 20:22

2

This image can help you understand better.

answered Nov 10 '17 at 20:22

Nick

374
1
9

score 1 · Answer 2 · answered Nov 10 '17 at 19:48

To build off of what @G-Cyr said, think of it in terms of pictures on a wall.

Your picture is your element in question; the frame around the picture can be considered the padding, or the immediate space surrounding image, yet unique to that element. Margin could be considered the spacing between two of the pictures on said wall.

From a philosophical standpoint, you may want to defer to margin when changing spacing between two elements.

score 0 · Answer 3 · answered Nov 10 '17 at 20:27

The fact is that margin is used to add space to things from the outside while padding is used to add spacing inside of that same thing, but for your question i am not sure if you're talking about aligning group of div as an example to the left, if i am to do that i will use the keyword alight-left which is available in css.

In css when to use padding and when to use margin

3 Answers3