CSS Padding vs Margin – Whats the Difference?

CSS Padding vs Margin – Whats the Difference?

When cutting up a design into html, you will need to recreate the design in html as accurately as possible. Positioning the elements correctly in html (not to mention, that dreaded cross browser support) can be tricky and having the elements laid out accurately can be the difference between a good looking website and a great looking website. To achieve this you will need to add a bit of div padding or div margins in order to get a div tag aligned into the correct place.

What is the difference between CSS Padding vs Margin

You may wonder what the differences between padding in html and margins in html really are. To give an analogy, think of a cardboard box (that represents your div tag). Now you want to place something inside the box, lets say a vase (in this case, the vase represents the contents inside the div tag, such as text, images or other web content). Now to position the vase correctly inside the box, we would add some newspaper “padding” into the box to hold the contents of the in its positions. The more padding you add, the less space there is in the box for the vase to move.

Now html margins is more like the space around the cardboard box. The more margins you add around the box, the further away it would space other boxes from itself. Larger margins means more space around the box. If you have no space (or html margins), then other boxes will be positioned right next to it.

When to use CSS Margin and CSS Padding

If you wanted to position the contents inside of a div (or any html tag) you will use padding (or newspaper as our previous analogy would depict). However if you wanted to position the div tag (which includes its contents inside), you will use margins.

That is a bit of a long winded description, but hopefully that will correctly explain what the differences are between html padding and margins.


Basically, when it comes to padding vs margins, your margins are just the space around an element and padding is the space inside an element. Padding being the space inside and Margin being the space around the outside.