CSS Box model

The CSS box model is a container that contains multiple properties including borders, margin, padding, and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements. The web browser renders every element as a rectangular box according to the CSS box model. Box-Model has multiple properties in CSS. Some of them are given below: 

• content: This property is used to displays the text, images, etc, that can be sized using the width & height property.
• padding: This property is used to create space around the element, inside any defined border.
• border: This property is used to cover the content & any padding, & also allows to set the style, color, and width of the border.
• margin: This property is used to create space around the element ie., around the border area.

The following figure illustrates the Box model in CSS.

• Content Area: This area consists of content like text, images, or other media content. It is bounded by the content edge and its dimensions are given by content-box width and height.
• Padding Area: It includes the element’s padding. This area is actually the space around the content area and within the border-box. Its dimensions are given by the width of the padding-box and the height of the padding-box.
• Border Area: It is the area between the box’s padding and margin. Its dimensions are given by the width and height of the border.
• Margin Area: This area consists of space between border and margin. The dimensions of the Margin area are the margin-box width and the margin-box height. It is useful to separate the element from its neighbors.

For setting the width & height property of an element(for properly rendering the content in the browser), we need to understand the working of the CSS Box model.

While setting the width and height properties of an element with CSS, we have only set the width and height of the content area. We need to add padding, borders, and margins in order to calculate the full size of an element. Consider the below example.

p {
 width: 80px;
 height: 70px;
 margin: 0;
 border: 2px solid black;
 padding: 5px;
}

The total width for the element can be calculated as:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The <p> element can have a total width of 94px.

Total width = 80px (width) + 10px (left padding + right padding) + 4px (left border + right border) + 0px (left margin + right margin) = 94px.

The total height for the element can be calculated as:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

The <p> element can have a total height of 84px.

Total height = 70px (height) + 10px (top padding + bottom padding) + 4px (top border + bottom border) + 0px (top margin + bottom margin) = 84px.

We will understand the Box model concept through the examples.

Example 1: This example illustrates the use of the CSS Box model for aligning & displaying it properly.

Output:

Example 2: This example illustrates the Box Model by implementing the various properties.

Output:

Supported Browser:

• Google Chrome
• Internet Explorer
• Microsoft Edge
• Firefox
• Opera
• Safari