Oct 19, 2021
What is the box model concept?
By: Rakshanda Kahilkar Category: Other Technologies Technologies: CSS, HTML5, javascript
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.
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
Browser DevTools to view the box model
The DevTools located in the subwindow inside the browser looks like the following, depending on the browser:
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.
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.
Originally published at https://www.cryptextechnologies.com.
