Margin vs Padding

Margin is an element’s personal space — how much distance the element wants to keep with other elements around it.

Padding is how much an element is away from itself — how much distance an element wants to keep with the elements inside it.

They both are used to create gaps around elements, but they differ in their method of creating that gap. Margin accommodates the gap by pushing adjacent elements away from it, while Padding accommodates the gap by either growing its own size or by shrinking the size of content inside it.

By default, padding will increase the size of the element to accommodate the gap. But if you set “box-sizing: border-box” on the element, then it will shrink the size of the content inside the element to accommodate the gap.

Use padding when:

Use margin when:

Hope this helps.

If you have any doubt let’s discuss it in comments, or feel free to drop me an email at kunal@supersarkar.com.

Keep Rocking \m/

Related posts:

Owariya Yonejiro was born in 1839 in old Edo, now Tokyo, into a way of life on its way out. His father, a wealthy merchant, had essentially purchased samurai status, becoming part of the ruling class…

When your house is lapped by water due to sea level rise should backstroke or breaststroke be preferred? People say education is wasted on the young but isn’t it foisted on them because no one else…