Learn what is box model in CSS.
All the HTML elements are rendered as a rectangular box according to the CSS box model by the browser. The term “Box model” is used to refer to the design and layout.
The CSS box model is a box of different properties that are wrapped around the HTML element. It is composed of Margin, Padding, Border and actual Content.
Following is the image representing the box model.
The box model allows us to add a border around elements, and to define space between elements.
In order to define the dimensions of the HTML elements correctly e.g width and height, we should now how the box model works.
Different parts of box model
- Content:- Content is the actual area of the element where text and images are contained.
- Border:- Border is the area around the content.
- Padding:- Padding is the area between the border and the content.
- Margin:- Margin is the area after the border.
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
When we set the width and height of the element we are only specifying the dimension of the content area. In order to calculate the full size of the element, we should also add border, padding, and margin.
Here the total width of the element is
Full width = width + left padding + right padding + left border + right border + left margin + right margin.
300 + 25 + 25 + 10 + 10 + 15 + 15 = 400px;
Height is also calculated like this only
Full height = height + top padding + bottom padding + top border + top border + top margin + top margin.
0 + 25 + 25 + 10 + 10 + 15 + 15 = 100px;