Are padding and margin interchangeable?



Can I use padding instead of margin to position an element?


Not always, even though they might seem to render similar results separating elements from one another, their main difference is that margin will create the space outside of the element, while padding constricts space inwards.

Here’s a visual example where the first element (red border) has received a padding property of 50px and the second (blue border) a margin property of 50px.

The space they occupy is the same, but the way it is occupied is different and that might make a difference in how your element is displayed.