Difference b/w margin and padding
It is very necessary to understand the box-model to distinguish between these two terms. Once you know the differences you will better know when and where to use the margin or padding.
There are a few key points that we figure out to differentiate between margin and padding.
| Padding | Margin |
|---|---|
It is defined as the space between the content and the border of a box. | It is defined as the space outside the border of a box. |
It increases the influencing area of an element. | It places the items far away from each other. |
Participates in the sizing of a box i.e. may increase the size of the box. | Does not participate in the sizing of the box. |
It is a clickable area and can have background-color. | It is just a space outside the box and can not have a background-color. |
It only accepts positive values i.e. the values that are greater than or equal to 0. | It accepts both positive and negative values. |
The vertical paddings of two boxes do not collapse. | The vertical margins of two boxes may collapse. |