What is the difference between Margin, Border, and Padding?

November 17,2021

To understand the difference of margin, padding and border, it is important that you need to understand the box model concept first.
The point is that each HTML element is rendered in a browser as a box, that consists of four parts:

What is margin?

The margin is a transparent space outside the element that separates it from other elements.
Basically, it pushes the element away from other elements.

What is padding?

The padding is the space between the actual content and the border of the element. It will have any background-color or backgorund-image property that has been applied to an element.

What is border?

Around every element's box is a border separating it from other elements on the page whether you see it or not. The border is the element's edge that surrounds the content and padding.
You can control the border's width, style, and color of any side of the element but you must set a value for each or the border won't appear.