Box model (Cont...)

Everything in CSS is a box or rather everything in HTML is a box-model, which is surrounded by 4 different box virtually.
 

• Content (original content inside element).
• Padding (create space between content and elements border).
• Border (create border around element).
• Margin (space between element).

Box model (Cont...)

Box model (Cont...)

Border:
 
You can create border around element by specifying the width, color and style.

For example,

Box model (Cont...)

Margin:

Margin defined the space between element.

for example, 

It will create 10px empty space around element in all direction.

Box model (Cont...)

Margin: (Cont...)

It will create empty space 10px to top, 5px to right, 15px to bottom and 20px to left directions around element.

It will create empty space 10px to top, 5px to right and left, and 15px to bottom directions around element.

Box model (Cont...)

Margin: (Cont...)

It will create empty space 10px to top and bottom, 5px to right and left directions around element.

Box model (Cont...)

Padding:

Similarly, as margin, you can pass four, three, two or one value in padding as well.

Padding allows you to create space between content and elements boundry.

For-example,

Box model (Cont...)

Padding: (Cont...)

You can write padding: 10%.

% - specify a padding or margin in % of the containing element.

Box model (Cont...)

If you add width as 100px, padding as 10px and border as 2px, then the entire width becomes 112px (100 + 10 + 2).

Box model (Cont...)

The box-sizing property defines how the width and height of an element are calculated.

If we apply box-sizing, border-box then the padding and border will be adjusted in the width and height of an element.

Box-Sizing: border-box;