Writing a CSS, there is a particular rule that should be used in deciding when to use margin and when to use padding.
There are two ways in CSS for creating the space around your elements i.e. margins and padding. They are functionally identical but they behave in slightly different ways.
To be clear about the difference between padding and margin is that margins auto-collapse, and padding doesn’t.
When using margin and padding, a lot of the decision comes down to personal preference for use.
So, margin is on the outside of block elements where as padding is on the inside.
Thus, use margin to separate block from the things outside it and use the padding to move contents away from edges of the block.
In an element, margin is used to create the distance between that element and other elements of the page where as padding is used for creating distance between content and the border of an element. So, the margin is not part of an element where as padding is part of it.
Read Also: Cellpadding and Cellspacing in CSS
The another difference is that the padding is included in the click region and background image or color, but not the margin.
The below diagram gives visual understanding of the difference.
Use margins :
- Margins lie outside of borders. So, you get space to appear outside of the “box” created by a border property.
- Hide your background color or image to invade the personal space.
- Get collapsible space on the top and bottom of the element. Having a top top margin of 15 pixels and a bottom margin of 10 pixels makes 15 pixels of space total between paragraphs because of the two margins collapse into one another, the largest wins out.
Use padding :
- Get the space you are creating to be inside your border because padding is contained within your borders. So, push your borders away from the content inside your element.
- Color the background or place image to continue on into the space you are creating. The background will continue on behind the padding and this helps to peek out.
- Get the top and bottom space to behave more rigidly. Having a top padding of 15 pixels and a bottom padding of 10 pixels, you get total of 25 pixels of space between them.