CSS Box Model

Box Model

The CSS box model is a rectangular layout for every element which can be displayed on the web page. It is a container which includes CSS properties including borders, margin, padding and the content, which are given below-

Margin:- It includes the area or space between border and margin.

Border:- It is a boundry line drawn around the padding of the element, whose dimensions are given by the width and height of border.

Padding:- It adds space between the content area and the edge of the box. It can be added to all four side of the content such as top, right, bottom, and left.

Content:- It is the area which includes content of the elements like text, image, or any other media content.

										    
											h1 {
												width: 300px;
												padding: 15px;
												border: 5px solid green;
												margin: 0;
											}
											
										

While setting the width and height of an element using the CSS width and height property, we are actually only setting the width and height of the content area. The actual total width and height is calculated like below-

Total Width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

Total Height = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom