CSS box Model Set the principle of the width and height of the Web page

When we layout a Web page, we often encounter such a situation, that is the end of the page to shape the width or height will exceed our prior calculation, in fact, is the so-called CSS box model caused.

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

As in the code of the previous paragraph, many times we will calculate the position it occupies as width:120px,height:120px, because under normal understanding, padding is the inner margin, should be included in the width inside, and margin is the outer margin, so width= Margin-left + margin-right + width, but the browser for the CSS box model explanation is not the case, so eventually we will find that the layout of the page width and height will exceed our expected calculation, and finally caused the display of dislocation. Web Teaching Network

In fact, the actual calculation of the location of test should be width=margin-left + margin-right + padding-left + padding-right + width, which is the width of the real size should be the internal margin + outer margin + width itself, that is, the true size of test should be 140px. The calculation of height is the same as the calculation of width. Web Teaching Network

And if you add a border to test, the width and height algorithm should also be added to the size of the border.

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

The width of test here should be the outer border + inner border + border + width itself, so test width is 150px.

As the figure below shows, the true position of width and height is not the small piece of itself, but the one that is always up to the outermost dark blue layer.