In the layout of web pages is of great importance to accurately indicate the size of the elements. If an error creeps into the calculations, the entire layout may “break”, ruining the appearance of the site. To avoid errors, it is important to understand exactly how browsers calculate block metrics and how this algorithm can be controlled using the CSS box-sizing property.
CSS block model
All document nodes having a block display type are described by a block model. According to it, in the structure of an element, the following areas, or boxes, nested in each other are distinguished:
- content-box, which includes the actual content of the block - text and child nodes;
- padding-box, which occupies all the space inside the frame along with internal indents, or paddings;
- border-box, which also includes the border itself.
In addition, for the block, you can define the outer margins, or margins, separating it from neighboring elements or the boundaries of the parent.
Any of the listed boxes may be absent or empty.
This is the basic concept of CSS, without which it’s almost impossible to create beautiful complex layouts.
Determining the actual dimensions of an element
The main thing for the browser is the content box, as this is the semantic part of any block. Therefore, when the typesetter specifies metrics using the width and height properties, they apply specifically to the content area.
Next, the inner and outer margins and the width of the frame are added to certain sizes of the inner box.
.block { width: 200px; height: 100px; padding-top: 20px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; border: 5px solid; }
Despite the fact that the block element is set to a width of 200 pixels, in reality it will occupy 230 pixels on the page, taking into account the frame and side paddings. The height is calculated in the same way: instead of the estimated 100 pixels, the block will occupy 150 vertically.
The basic metric calculation algorithm is based primarily on the importance of content. However, on real web pages, elements often perform a decorative function and do without content. In addition, it’s rather tedious and fraught with errors to constantly calculate the sum of all indents to find out the final size.
There is a CSS box-sizing property that allows you to specify the final metrics and not worry that the block will creep over the set boundaries due to internal indentation.
Calculation algorithm management
The layout designer can tell the browser which box of a block element it should take as a basis for calculating sizes. The width and height properties will be applied to this area.
For the CSS box-sizing property, the default value is predictably the content-box. But there is another value available for selection.
.block { box-sizing: border-box; width: 100px; border: 5px; padding: 10px; }
The value of box-sizing: border-box in CSS instructs the browser to start from the size of the element as a whole, along with the border and indentation to the content area. The actual size of the block element will be exactly 100 pixels, but its content box will have to shrink to 70 pixels horizontally.
It would be logical to assume that the CSS box-sizing property has a padding-box value, but it is not. It was supposed to be a specification, but not currently implemented by browsers. However, the two available calculation algorithms are quite enough.
block1 { width: 500px; border: 5px; padding: 30px; box-sizing: border-box; } block2 { width: 500px; border: 5px; padding: 30px; box-sizing: content-box; }
The instruction for the box-sizing: border-box allows you to set fixed sizes that will not depend on the indentation and thickness of the frame.
// 300 .block { width: 300px; box-sizing: border-box; padding: 10px; } // , .block { width: 300px; box-sizing: border-box; padding: 15px; }
If the typesetter decides to experiment with the value of the paddings, he will not have to recount the total width of the element with each change, since it will not change. This is very convenient for long-term layout maintenance.