Margin, Border and Padding

16th January 2025

Margin, border and padding are known as key components in the CSS box model. They determine how elements are spaced and laid out on your webpage. When explaining the difference between margin border and padding, it can be broken down quite easily. The best way to do that would be to start by looking closer into each one:

Margin

Margin is the space outside the border. Its purpose is to create space between the chosen element and the other elements on the webpage.

Border

The border is the line that wraps around the padding and the content of the element. It is used to separate an element from its surroundings. There are many types of borders, with the most popular ones usually being the solid, dotted or dashed.

Padding

Padding is the open space that separates the content and the border. To stop this from happening, the padding pushes the content inward.

As you can see, these key components are must-haves in getting the desirable design on your webpage.

@ Callum Bromley 2025