box model

1. What is Box Model?

When the browser renders an element, it treats it as a rectangular box. This box consists of four areas:

+----------------------------+
|        margin 外边距       |
|  +----------------------+  |
|  |     border 边框      |  |
|  |  +----------------+  |  |
|  |  |  padding 内边距 |  |  |
|  |  | +-------------+ |  |  |
|  |  | | content 内容 | |  |  |
|  |  | +-------------+ |  |  |
|  |  +----------------+  |  |
|  +----------------------+  |
+----------------------------+

2. The difference between the two box models (core)

Model type	Calculation method (what width represents)	CSS trigger method
Standard Box Model (W3C)	width = content area width, excluding padding and border	box-sizing: content-box (default)
IE box model	width = content + padding + border overall box width	box-sizing: border-box

Example:

div {
  width: 200px;
  padding: 10px;
  border: 5px solid;
}

Model	Actual rendering width
content-box	200 + 10 + 10 + 5 + 5 = 230px
border-box	200 (including padding and border)

3. Detailed explanation of box-sizing attribute

Attribute value	Meaning
content-box	width contains only the content area (default)
border-box	width contains content + padding + border (recommended)
inherit	Inherit parent element settings

In the default definition of the CSS box model, the width you set for an element is the same asheight will only be applied to the content area of this element.If this element has any border or padding , the width and height of the box when drawn to the screen will be added to the set border and padding values.

Source: https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

4. Practical recommendation writing method (almost all projects are written this way)

Modern front-end projects (Vue/React/Tailwind) will set global settings:

*, *::before, *::after {
  box-sizing: border-box;
}

Advantages:

• padding and border no longer affect the total width of the box;
• The layout is more intuitive and reduces calculations;
• Especially suitable for responsive and complex UI (such as cards, forms);

5. Examples and comparisons (perceptual understanding)

1️⃣Default (content-box)

<div class="box1">content-box</div>

.box1 {
  width: 200px;
  padding: 20px;
  border: 10px solid #4f46e5;
  background: #c7d2fe;
}

👉 Actual occupied width = 200 + 40 + 20 = 260px

2️⃣ border-box

<div class="box2">border-box</div>

.box2 {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 10px solid #4f46e5;
  background: #a5b4fc;
}

👉 Actual occupied width = 200px, better control!

6. Several small traps related to layout

Scenario	Question
Set width: 100% with padding	Actual width > parent, will overflow (content-box)
Want the box to have a fixed size	Using border-box is safer
Tailwind / ElementPlus default	global border-box set

7. Possible questions from the interviewer

❓1. How to verify the box model?

👉 Open the browser DevTools → Elements → “Computed” panel → Box Model icon to see it at a glance.

❓2. Why does CSS Reset need to add *, *::before, *::after { box-sizing: border-box; }?

👉 Because pseudo elements (::before, ::after) default to content-box, not resetting will affect the layout.

❓3. What if you only want some components to use the standard model?

👉 Partial coverage:

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

8. Interview answer template (30 seconds)

In CSS, each element is a box, divided into four layers: content, padding, border, and margin. The default box model is the standard model (content-box), and width only includes the content area; The IE model (border-box) will include both padding and border in width. We can control it through the box-sizing attribute. Generally, projects will be uniformly set to border-box. This makes the layout more controllable and avoids width calculation errors, especially in responsive scenarios.

9. Visualization case (recommended to do a demo exercise yourself)

<template>
  <div class="container">
    <div class="box content-box">content-box</div>
    <div class="box border-box">border-box</div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  gap: 20px;
}
.box {
  width: 200px;
  padding: 20px;
  border: 10px solid #4f46e5;
  background: #c7d2fe;
  text-align: center;
}
.content-box {
  box-sizing: content-box;
}
.border-box {
  box-sizing: border-box;
  background: #a5b4fc;
}
</style>