CSS Concepts:

What's the difference between Border, Margin, and Padding?

27/02/2025

All of these are CSS properties and have a purpose but what do they do? Well I've spent an hour researching this topic, creating visual examples and have come to an understanding.

Lets imagine a house like this:

(all images were taken/made by me.)

The house would be the content, the plot surrounding the house is the Padding.
(The padding is shown in yellow below)

The fence surrounding the house/padding would be the border.
(I removed the yellow to make it easier to see)

But you maybe wondering what about the Margin? Well the Margin would be any space between the house's fence and the neighbor's fence.
(Shown below in red)

To summarise my very basic explaination:

• Padding is the clickable space around the element.
  Example code: padding: 0px 5px 0px 5px;
• Border determines where the element stops.
  Example code: border: 1px solid black;
• And finally, Margin is the spacing outside of the border separating the element from other divs/elements.
  Example code: margin: 2px;

(all the code examples are using the actual bits of code to display the examples.)

Hopefully this article helps give you an understanding of the difference between the 3 properties and how you'd use them.
If you feel like it's not a good enough explaination, feel free to inquire or send me feedback.😁

The End.