CSS Box Model (Box Model)
May 03, 2021 CSS
Table of contents
CSS Box Model (Box Model)
All HTML elements can be thought of as boxes, and in CSS, the term "box model" is used for design and layout.
The CSS box model is essentially a box that encapsulates the surrounding HTML elements and includes: margins, borders, padding, and actual content.
The box model allows us to place elements in space between other elements and the surrounding element borders.
The following picture illustrates the Box Model:
Description of the different sections:
- Margin (Margin) - Clears the border area. Margin has no background color, it is completely transparent
- Border - Fills and content around the border. The border is affected by the background color of the box
- Padding (Inner Margin) - Clears the area around the content. is affected by the background color of the fill in the box
- Content - The contents of the box, displaying text and images
In order to set the width and height of elements correctly in all browsers, you need to know how the box model works.
Tip: In a box model, margins can be negative, and in many cases negative margins are used.
Tip: Refer to the internal structure of the CSS box model for more information.
The width and height of the element
Important:
When you specify the width and height properties of a CSS element, you simply set the width and height of the content area.
To know that full-size elements, you must also add padding, borders, and margins.
The total width of the elements in the following example is 300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Let's calculate for ourselves:
250px (W)
20px (left and right fill)
10px (left and right box)
20px (left and right margin)
= 300px
Imagine you only have 250 pixels of space. Let's set an element with a total width of 250 pixels:
The final element's total width is calculated as follows:
The width of the total element, the width, the left fill, the right fill, the left box, the right frame, the left margin, the right margin
The final formula for calculating the total height of an element is this:
The height of the total element, the height, the top fill, the bottom fill, the top border, the bottom border, the top margin, the bottom margin
Browser compatibility issues
Once the page is set up with the appropriate DTD, most browsers render the content as shown above. H
owever, the rendering of IE 5 and 6 is incorrect. A
ccording to the W3C specification, the space occupied by the element content
width
property, and the
padding
border
border
around the content are calculated separately. U
nfortunately, IE5. X
and 6 use their own non-standard models in weird mode.
The width properties
width
these browsers are not the width of the content, but the sum of the width of the content, the margin, and the border.
Although there are ways to solve this problem. B ut the best solution at the moment is to avoid the problem. That is, instead of adding an inner margin with a specified width to an element, try adding an inner margin or margin to the element's parent and child elements.
IE8 and earlier versions of IE do not support the width of the fill and the width of the border.
Fixing IE8 and earlier version incompatibilities can be declared
<!DOCTYPE html>
Read about it
CSS Pick-Up Series: CSS Box Model Cop