What is the box model concept?

What is the box model concept?

19 Oct 2021
0 Comments
What is the box model concept?

The term "box model", in CSS, is used to talk about design and layout. The CSS box model is a box that covers every HTML element. It consists of: borders, margins, padding, and content.

 

The Box model:

Content box: The area that displays the content. The box can be sized using properties like width and height.

Padding box: The padding lies around the content in the form of white space. The size of the box can be controlled using padding and similar properties.

box-model

Description of the different parts:

Content - The space where text and images appear.

Padding - Clears an area around the content. The padding is always transparent.

Border - A border covers the padding and the content elements.

Margin - Clears the area outside the border. The margin is transparent

 

The box model enables the user to add a border around the elements and define the space between the elements.

To set the width and height of the elements precisely in all browsers, the user needs to understand how the box model works.

 

The total width of the elements can be calculated like:

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

 

The total height of the elements can be calculated like:

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

box-model-concept

Browser DevTools to view the box model

The DevTools located in the subwindow inside the browser looks like the following, depending on the browser:

box-model-devtool

In the example below, the user can change the margin values to see how the box is pushed around due to the creation of margin or removing spaces between the element and the containing element.

box-model-concept

Conclusion:

This is what the user needs to understand about the box model. The above-mentioned terms will enable the user to create and implement the box models in their layout.




Leave a comment: