CSS Two box models

There are two types of box models, namely the standard box model and the IE box model. They have different interpretations of the box model.

Let's first look at the familiar standard box model:

As can be seen, the scope of the standard box model includes margin,border,paddding,content, and content The width calculation does not include other parts.

Then look at the IE box model:

The scope of the IE box model can be seen also includes margin,border,paddding,content, different,content The width calculation includes border and paddding.

Q: What kind of box model should I choose?

A: Of course, the "standard box model".

Q: What is the choice of "standard box model"?

A: It's easy to add a DOCTYPE statement to the top of the page. Then all browsers will use the standard box model to explain your box, the Web page can be displayed in each browser consistent.

<! DOCTYPE HTML >

CSS Two box models