Box model

The box-model covers:

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

Border:

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

For example,

p { 
	border: 1px solid black; 
}

Margin:

Margin defined the space between element.

for example,

p { 
	margin: 10px; 
}

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

Margin: (Cont...)

p { 
	margin: 10px 5px 15px 20px; 
}

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

p { 
	margin: 10px 5px 15px; 
}

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

Margin: (Cont...)

p { 
	margin: 10px 5px;
}

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

Padding:

p { 
	padding: 10px;
}

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,

Padding: (Cont...)

You can write padding: 10%.

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

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

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;