What is the box model?

Time:2021-8-15

What is the box model

In page layout, the layout model adopted by Dom elements is the box model in the popular sense.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 30px;
            margin: 10px;
            padding: 20px;
            border: 5px solid chocolate;
        }
    </style>
</head>
<body>
    <div class="box">
        content
    </div>
</body>
</html>

1. The box model includesOuter space - border - inner space - contentFour parts. Open browser F12 and you can clearly see the outer margin – border – inner margin and the final content structure of the box. This is the whole box model

What is the box model?

2. There are two common box models, which can be set through box sizing

  1. border-box(ie box model)
  2. content-box(W3C standard box model)

    • Now let’s add propertiesbox-sizing:border-box, you can clearly see the width we definedwidth(100px) = content(50px) + padding(40px) + border(10px)
Then the width of the box is ` width (100px) + margin (20px) = 120px`

What is the box model?

-Modify 'box sizing: content box', and you can see 'width (100px) = content (100px) `,
Then the width of the box is ` width (100px) + padding (40px) + border (10px) + margin (20px) = 170px`

What is the box model?

3. Outer margin

The spacing between two adjacent elements, whichever is the largest

<style>
.box2{
    width: 50px;
    height: 10px;
    margin: 20px;
    padding: 30px;
    border: 10px solid seagreen;
}
</style>
<div class="box">
    content
</div>
<div class="box2">
    content2
</div>
  • Here we can see that the adjacent outer margin of the two boxes is the largest outer margin of box2

What is the box model?

4. Solution to inconsistent browser display due to IE’s strange box model

I believe it is not difficult for you to find that compared with border, our key problem is padding (there are fewer borders), so the best solution is to use margin without padding.
However, some cases can not be solved without padding. Then what shall I do? Here we can find that everything is caused by the simultaneous use of width and padding / border.
Then the final solution comes out.
You can define a box without width in the box, assign padding and border to the whole box, and the outer box. We just give width and margin.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            margin: 20px;
        }
        .content{
            padding: 20px;
            border: 5px solid chocolate;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            content
        </div>
    </div>
</body>
</html>
  • It can be seen that although the width of our inner box is not set, it has a width of 200px after being wrapped in the outer box. The width of the formal outer box, but at the same time, there are padding and border, which can perfectly solve the problem of strange boxes.

What is the box model?