When to use margin vs padding in CSS [closed]

Answer 1

Margin

Margin is usually used to create a space between the element itself and its surround.

for example I use it when I'm building a navbar to make it sticks to the edges of the screen and for no white gap.

Padding

I usually use when I've an element inside a border, <div> or something similar, and I want to decrease its size but at the time I want to keep the distance or the margin between the other elements around it.

So briefly, it's situational; it depends on what you are trying to do.

Answer 2

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

MARGIN vs PADDING :

1. Margin is used in an element to create distance between that element and other elements of page. Where padding is used to create distance between content and border of an element.

2. Margin is not part of an element where padding is part of element.

Please refer below image extracted from Margin Vs Padding - CSS Properties

Answer 4

First let's look at what are the differences and what each responsibility is:

1) Margin

The CSS margin properties are used to generate space around elements.
The margin properties set the size of the white space outside the border. With CSS, you have full control over the margins.
There are CSS properties for setting the margin for each side of an element (top, right, bottom, and left).

2) Padding

The CSS padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of an element.
With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left).

So simply Margins are space around elements, while Padding are space around content which are part of the element.

This image from codemancers shows how margin and borders get togther and how border box and content-box make it different.

Also they define each section as below:

• Content - this defines the content area of the box where the actual content like text, images or maybe other elements reside.
• Padding - this clears the main content from its containing box.
  
• Border - this surrounds both content and padding.
• Margin - this area defines a transparent space that separates it from other elements.