Introduction

Before we get started on the differences between margin, padding & borders we first need to understand block & inline elements/tags.

An inline element is esentially something that natively does not take up the full width of a page. See examples below of some.
This means any padding, borders or margins are directly aplied to just that element not the whole line. This causes any Margins, Borders, & Padding to behave differently.

A block element is esentially something that natively does take up the full width of a page. See examples below of some.
This means any padding, borders or margins are directly aplied to the entire space that the block element is on.

The below lists is also an example of how natively block elements can be changed to inline elements (display: inline-block;).

In-line Elements

• span
• script
• var
• strong
• button
• input

Block Elements

• p
• header tags
• list tags
• div
• table
• form

Padding USE: To create space between the edge of an element and its content

Padding is amount of space between the edge of the container and the content. When it comes to inline and inline-block elements there is one difference to how this are appliead. An Inline element can only have padding added to the sides of it. This is because it's an inline element. An Block element can have padding in all four directions.

This can increase the size of an element.

Examples:

Padding directly on the red box Div

It applies padding internally to the contents of the Red Div shifting them furhter inside whilst also increasing the overall size

Applying it to an block element will increase the size of the entire container even with max-width set.

Padding directly on the red box Text

This creates space outside the text. Since its a small box it essentially looks like the border for the text is now the border for the Div.

The "Red Box" text is also overflowing inside the div now, which is why its on seperate lines

Margin USE: To create space between the edge of one element and another element

The margin of an element is the relationship that element has with another in the document. Margins do not directly influence the size of an element.

Note: Margins do not combine with other elements the larger of the two margins will* take precendece. For example on peice of content has a 10px margin and another is 20px margin, the total distance between the two elements will be 20px not 30px.

This doesn't increase the size of an element rather the how close other elements can be to it.

Examples:

Adding 15px Margin to the Red Div

This creates a 15px social distancing rule from any other elements and the sides of the page

Margin on Inline element

This shifts the text outisde of the Div but only effects the first line as it wraps

Borders USE: To create styling

A border is a way of styling an element. The border and its children have hundreds of ways to style a border. For example all the blue-ish divs of content on this page have a border on them. They are transparent but allow the Div to have some nice curves.

Borders do count towards the total size of an element and will add with any borders in direct contact if no margins. Borders live on the edge, borders apply on the outside of an element not the inside.

Examples:

How touching borders add

The thickness of the red-box border adds on top of the blue-box

Borders increase size

The thickness of a border adds horizontally/vertically and increases the size of the overall element.

(Both the Red & Blue box are the same size)

What's the difference

First what is similar

Borders, margins and padding in some way increase the space an element takes up on the page.

That's all that is similar really, each have there own unique properties and can't be used instead of another.

What's different

The most different one out of the three is borders. Borders out of the three are the cosemtic shapers of elements. They can shift an element and increase it size. But its main purpose is to encase content in some styling effect.

Padding and Margins both esentially increase the free realestate for the contents/element to position between other elements. The way I look at it is that padding effects children and the margin affects its and other elements position.