Stop Your CSS Layout From Breaking: Understand box-sizing

防止 CSS 布局崩坏：理解 box-sizing

If you’ve ever set an element to width: 300px and wondered why it ends up wider than 300px, you’re not alone. One of the most important CSS concepts for beginners is the box model. Understanding it can save you a lot of time debugging overflowing cards, inputs, buttons, and layouts.

如果你曾将某个元素的宽度设置为 width: 300px，却纳闷为什么它最终的宽度超过了 300px，你并不孤单。对于初学者来说，最重要的 CSS 概念之一就是“盒模型”（Box Model）。理解它能为你节省大量调试卡片、输入框、按钮和布局溢出问题的时间。

The CSS Box Model

CSS 盒模型

Every HTML element can be thought of as a box made up of four main parts:

• Content
• Padding
• Border
• Margin

每个 HTML 元素都可以被看作是一个由四个主要部分组成的盒子：

• 内容 (Content)
• 内边距 (Padding)
• 边框 (Border)
• 外边距 (Margin)

The important part is understanding what happens when you give that box a width. Consider this CSS:

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
}

You might expect the card to be exactly 300px wide. But with the default CSS box-sizing behavior, it isn’t. The browser calculates:

• Content: 300px
• Padding: 20px + 20px
• Border: 2px + 2px
• Total width: 344px

关键在于理解当你给这个盒子设置宽度时会发生什么。看看这段 CSS：

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
}

你可能期望卡片的宽度正好是 300px。但在默认的 CSS box-sizing 行为下，事实并非如此。浏览器计算如下：

• 内容：300px
• 内边距：20px + 20px
• 边框：2px + 2px
• 总宽度：344px

So your 300px element actually takes up 344px horizontally. That’s because the default value is: box-sizing: content-box;

所以你的 300px 元素在水平方向上实际上占据了 344px。这是因为默认值是：box-sizing: content-box;

Why This Can Break Your Layout

为什么这会导致布局崩坏

Imagine the card is inside a container that only has enough space for a 300px element. Your additional padding and border can cause the card to overflow its parent. A common reaction is to add overflow: hidden;, but that can simply hide the symptom instead of fixing the sizing problem. A better solution is often border-box.

想象一下，如果卡片位于一个仅有 300px 空间的容器内，额外的内边距和边框会导致卡片溢出父元素。常见的反应是添加 overflow: hidden;，但这只是掩盖了症状，并没有解决尺寸问题。更好的解决方案通常是使用 border-box。

Use border-box

使用 border-box

Change the element to:

.card {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
}

Now the padding and border are included inside the declared 300px width. So:

• Declared width: 300px
• Final width: 300px

将元素修改为：

.card {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
}

现在，内边距和边框被包含在声明的 300px 宽度内了。所以：

• 声明宽度：300px
• 最终宽度：300px

This makes element sizing much easier to reason about.

这使得元素尺寸的计算变得更加直观。

Apply It Globally

全局应用

Instead of adding box-sizing to every component individually, you can apply it across your project:

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

Now your regular elements and their ::before and ::after pseudo-elements use predictable sizing. This is especially useful for .card, input, and button. It can make forms, cards, buttons, and other UI components much easier to align.

与其为每个组件单独添加 box-sizing，不如在整个项目中应用它：

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

现在，你的常规元素及其 ::before 和 ::after 伪元素都将使用可预测的尺寸。这对于 .card、input 和 button 尤其有用。它能让表单、卡片、按钮和其他 UI 组件更容易对齐。

A Quick CSS Debugging Trick

一个快速的 CSS 调试技巧

When you don’t know which element is causing unexpected spacing or overflow, temporarily add:

* {
  outline: 1px solid red;
}

This gives every element a visible outline. You can quickly inspect where an element extends beyond its expected boundaries. Once you’ve found the problem, remove the debugging rule.

当你不知道是哪个元素导致了意外的间距或溢出时，临时添加：

* {
  outline: 1px solid red;
}

这会给每个元素添加一个可见的轮廓。你可以快速检查元素在何处超出了预期的边界。一旦找到问题，移除该调试规则即可。

content-box vs border-box

content-box 与 border-box 的区别

Here’s the simple way to remember the difference:

• content-box: Your declared width applies to the content. Padding and borders are added outside it.
• border-box: Your declared width includes the content, padding, and border.

For most everyday layouts, border-box makes sizing much more predictable.

以下是记住两者区别的简单方法：

• content-box：你声明的宽度仅应用于内容。内边距和边框会添加在内容之外。
• border-box：你声明的宽度包含了内容、内边距和边框。

对于大多数日常布局，border-box 能让尺寸计算变得更加可预测。

---

What CSS concept confused you the most when you first started learning? Let me know in the comments.

你刚开始学习时，哪个 CSS 概念最让你困惑？欢迎在评论区告诉我。