CSS Box Model: All HTML elements can be considered as boxes.
The segments that can be depicted on the page comprise of one or more than one rectangular box.
A CSS box model is a compartment that incorporates various resources, like edge, border, padding and material. It is used to develop the design and structure of a website page. It can be used as a set of tools to personalize the layout of various components. According to the CSS box model, the internet browser supplies each element as a square prism.
The CSS Box Model
In CSS, the term “box model” is used when talking about design and format.
The CSS box model is basically a box that wraps around every HTML element. It comprises of: margins, borders, padding, and the actual content. The picture beneath represents the box model:
Clarification of the various parts:
• Content – The content of the box, where text and pictures appear
• Padding – Clears an area around the content. The padding is straightforward
• Border – A border that goes around the padding and content
• Margin – Clears an area outside the border. The margin is straightforward
The box model allows us to add a border around elements, and to define space between elements.
Example
Demonstration of the box model:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Width and Height of an Element
In order to set the width and height of an element accurately in all browsers, you need to know how the box model functions.
Significant: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you should likewise add padding, borders and margins.
Example
The <div> element will have a total width of 350px:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Here is the calculation:
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
