On this Article we offer you detailed Info on Margin vs Padding. Margin is a component’s private area —… | by Kunal | Frontend Shortcut
Margin is a component’s private area — how a lot distance the component desires to maintain with different components round it.
Padding is how a lot a component is away from itself — how a lot distance a component desires to maintain with the weather inside it.
They each are used to create gaps round components, however they differ of their methodology of making that hole. Margin accommodates the hole by pushing adjoining components away from it, whereas Padding accommodates the hole by both rising its personal dimension or by shrinking the dimensions of content material inside it.
By default, padding will improve the dimensions of the component to accommodate the hole. However in case you set “box-sizing: border-box” on the component, then it would shrink the dimensions of the content material contained in the component to accommodate the hole.
Use padding when:
- You don’t need your content material to the touch the perimeters of the container. Instance: you might have a bunch of
components inside a div and also you don’t need the textual content inside
components to the touch the div’s border: