This paper is only a brief introduction to the box model, too deep concepts and technologies are not discussed.

What is a box model?

A box model is a rectangular region generated by an element. It consists of four parts:

  • Margin (the area outside the border where the margin is transparent)
  • Border area
  • Padding inner margin area
  • The content area is a place where you can put text, pictures, etc.

Yes, margin is also part of the box model, although we usually use it to control the distance between two boxes.

Box model classification

There are two types of box models

  • Content-box Model
  • Weird Box model /IE box model (border-box)

Standard box model

Under the standard box model, we set the width and height of the element to be the width and height of the content area, excluding the padding and border areas.

So the actual size of the element is determined by the width, height, padding, and border of the box.

If you set a padding or border on a box with a width and height, the box will be enlarged.

Here’s an example:

So now we have a box that’s 100px by 100px, so let’s add a little bit of text. Now it looks like this:

We’ll give this box a padding of 50px;

The box is stretched too far! ? This feature is obviously not good for our calculations in real development.

Weird box model /IE box model

The weird box model is one of the few good things Internet Explorer has done for the front end. Leaving aside the torture that older versions of Internet Explorer, such as IE6, inflicted on front-end developers, the weird box model of Internet Explorer has come in handy.

In the weird box model, the width and height you set are the actual width and height of the box, and the padding and border values you set do not affect the actual size of the box.

Again this box, we set it to the weird box model:

box-sizing:border-box;

We set width and height to 100px. Now we’ll add the padding and border.

The inside margins are there, the borders are there, but the overall size of the box is still the 100px we gave it.

Conclusion contrast

Standard box model: CSS width and height are only the width and height of the content area, not the padding and border. The actual box size includes: Content + padding + border + Margin

Weird box model: CSS Settings width and height include content+padding+border. The actual size of the box is width + margin.

The box size mentioned here is the size of the box model, so margin is included.