May 03, 2021 CSS
CSS Box Model (Box Model)
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:
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.
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
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>
CSS Pick-Up Series: CSS Box Model Cop