MARGIN vs BORDER vs PADDING

CSS Margin

The CSS margin properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins.

CSS Border

The CSS border properties allow you to specify the style, width, and color of an element's border.

CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding.

Similarities

All of which have the same values for setting the their respective properties for each side of the imaginary box:

• Top
• Right
• Bottom
• Left

Differences

Margin changes the space around the object and has the ability to move the target object by doing so.

Border outlines the object and can help adjust the shape of the content.

Padding adds onto the object from within.

The Box Model

In CSS, the term "box model" is used when talking about design and layout.

It is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

As seen in the figure above, the following statements are true along with the colors shown below:

• Margin sits outside of the content.
• Border sits on the content and outlines the border.
• Padding sits inside the content.