The CSS box model defines the principle of webpage width and height

When we lay out a webpage, we often encounter such a situation, that is, the final width or height of the webpage will exceed our pre-calculation, it is actually caused by the so-called CSS box model.

 
# Test {margin: 10px; padding: 10px; width: 100px; height: 100px ;}

In the code above, we often calculate the position occupied by it as width: 120px and height: 120px, because under normal understanding, padding is the padding, it should be included in width, while margin is the outer margin, so width = margin-left + margin-right + width, but the browser does not explain the CSS box model, in the end, we will find that the layout of the webpage width and height will exceed our expectation, leading to misplacement in the display.

Otherwise, the actual calculation of the position occupied by test should be width = margin-left + margin-right + padding-left + padding-right + width, that is, the actual size of the width should be the padding + margin + width, that is, the actual size of test should be 140px. The calculation of height is the same as that of width.

If the border is added to the test, the border size should be added to the algorithm of the width and height.

 

# Test {margin: 10px; padding: 10px; border: 5px; width: 100px; height: 100px ;}

Here, the width of test should be the outer border + the inside Border + The Border + the width itself, so the width of test is 150px.

 

As shown in the following figure, the true position of width and height is not the small part of width, but the layer of the dark blue on the outermost side.