Make writing a habit together! This is the fourth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Hi, I’m the watermelon guy. Today I’ll tell you about a CSS interview question I came across a long time ago.

With the following HTML and CSS styles, what is the width and height of the two orange areas?

<style>
  .box {
    width: 10px;
    height: 10px;
    border: 1px solid # 000;
    padding: 2px;
    margin: 2px;
    background-color: orange;
  }

  .content-box {
    box-sizing: content-box;
  }

  .border-box {
    box-sizing: border-box;
  }
</style>
<div class="box content-box"></div>
<div class="box border-box"></div>
Copy the code

The CSS box model is examined.

CSS box model

The CSS box consists of four areas, from inside to outside:

  • Content Box: The Content box is used to display the Content (innerHTML). By default, width and height are controlled. But if box-sizing is set to a non-Content-box value, the rules change.
  • Padding box: Inside margin box, which can be set using the Padding property.
  • Border box: Border box. You can set the Border size and style using the Border property.
  • Margin box: Margin box. Set the Margin size using the Margin property.

Note that margin does not count toward the actual size of the box. For example, the background color of the box will not cover the margin. You can think of margins as a wall of air between boxes that control the distance between them.

Box-sizing can be used to control which box width and height are applied to.

Content-box Model

For modern browsers, the element applies the standard box model by default. Of course you can also do this explicitly.

.box {
  box-sizing: content-box;
}
Copy the code

In the standard box model, the width and height attributes are used to set the Content Box.

Let’s go back to the problem. Let’s look at the width and height of the first orange block.

.box {
  width: 10px;
  height: 10px;
  border: 1px solid # 000;
  padding: 2px;
  margin: 2px;
  background-color: orange;
}
.content-box {
  box-sizing: content-box;
}
Copy the code
<div class="box content-box"></div>
Copy the code

The content is 10px wide.

Padding-left, padding-right, padding-bottom, and padding-left are shorthand properties for padding-left. The width of the box needs to take into account both the padding-left and the padding-right.

Then there are the left and right border bars. Margin is not computed in the box model.

So for the box model, the width is 16px (10 + 2 * 2 + 1 * 2), and the height is also 16px.

Is this the answer?

No, because the width of the orange block we’re looking for is actually the width of the Padding box, and it doesn’t include the black border line. So our first orange block is 14px wide and high.

Let’s dig a little deeper. If we set the border color to transparent, say border: 1px solid RGB (0, 0, 0, 0), what do you think the width and height of the orange block would be?

The answer is 16px. The background color fills the entire box first and then adds a border to it. If the border becomes transparent, it will reveal part of the orange area that it originally covered.

Weird Box model (border-box)

Weird box model, also known as IE model.

Earlier versions of Internet Explorer did not follow CSS standards. Width and height were used to set the width and height of the Border box, not the Content box. This caused different browsers to behave differently and was definitely a browser bug.

Box-sizing was later introduced in CSS3, allowing developers to choose which box model to use, providing greater flexibility. With the following Settings, we can set the element’s box model to the weird box model.

.box {
  box-sizing: border-box;
}
Copy the code

In the weird box model, the width and height attributes are used to set the Border box box. That is, we directly set the width and height of the box corresponding to the element, and then use the padding and border to calculate the Content box.

Let’s see how we calculate the width and height of the second orange block in the problem.

.box {
  width: 10px;
  height: 10px;
  border: 1px solid # 000;
  padding: 2px;
  margin: 2px;
  background-color: orange;
}
.border-box {
  box-sizing: border-box;
}
Copy the code
<div class="box border-box">
Copy the code

The width of the box model is 10px. Subtract 2px from the border (two 1px border lines) to get the border box width of 8px. Same thing with height.

The width and height of the first orange block is 14px and the width and height of the second orange block is 8px.

At the end

For DOM elements, we have two box models:

  1. box-sizing: content-box: width and height apply to the standard box model for Content box, which is the default box model;
  2. box-sizing: border-box: width and height for Border box weird box model.

Box-sizing only supports the above two values. There is no padding-box model, so don’t overthink it.

I am front-end watermelon brother, a programmer like to share front-end technology, welcome to follow my public account “front-end watermelon brother”.