网页渲染疑难：按钮宽度超出预期的原因排查

Problem Context #

I have an HTML/CSS document where the rendered output doesn't match my expectations. The issue occurs consistently across Firefox ESR 52.5.2, Chromium 57.0.2987.98, and Opera 50.0.2762.58 on Linux, so it's unlikely a browser-specific bug.

My expected layout: the right edge of the "y" button with the .button-wider-2 class should align perfectly with the right edge of the second "x" button above it. However, this button is wider than intended.

The two "y" buttons only differ in their width classes:

• The upper one uses .button-wider-1, which calculates width via a calc() expression
• The lower one uses .button-wider-2, which adds an extra standard button width (from the "x" buttons) to the .button-wider-1 calculation

Here's the full self-contained code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Question</title>
<style type="text/css">
.mystery, .mystery * { padding: 0; border: 0; margin: 0; }
.button-container { background-color: #f77; padding: 1rem; margin: 1rem; }
.button { float: left; font-family: 'Courier', monospace; width: 3.1rem; height: 2rem; border: solid black 2px; margin-right: 0.7rem; }
.button-wider-1 { /* The following 'calc' expression adds up: * the standard width of a button (i.e. the width of an element with class "button"); * the width of a button's border; * the horizontal margin (i.e. the value of margin-right for a button); * the width of a button's border; */ width: calc( 3.1rem + 2px + 0.7rem + 2px ); }
.button-wider-2 { /* The following 'calc' expression is the same as the previous, except that there is an extra term at the end, the standard width of a button. */ width: calc( 3.1rem + 2px + 0.7rem + 2px + 3.1rem ); }
</style>
</head>
<body>
<div class="mystery">
<div class="button-container">
<button type="button" class="button">x</button>
<button type="button" class="button">x</button>
<div style="clear: both"></div>
<button type="button" class="button button-wider-1">y</button>
<div style="clear: both"></div>
</div>
<div class="button-container">
<button type="button" class="button">x</button>
<button type="button" class="button">x</button>
<div style="clear: both"></div>
<button type="button" class="button button-wider-2">y</button>
<div style="clear: both"></div>
</div>
</div>
</body>
</html>

Answer #

The root cause here is the default CSS box model behavior—specifically, the box-sizing: content-box setting applied to all elements by default.

What's going wrong with content-box? #

When box-sizing is set to content-box, the width property only defines the width of the element's content area. Any borders or padding you add are extra and increase the total width of the element. This is why your calc() calculations are off:

1. A standard .button has width: 3.1rem plus 2px borders on both sides. Its total occupied width (content + borders) is 3.1rem + 4px, plus a margin-right: 0.7rem.
2. Your .button-wider-1 calculation accounts for the content width, borders, and margin—but since the class inherits the .button border, the total width of this button becomes the calc() value plus another 4px of borders (the difference is small enough to miss at first glance).
3. For .button-wider-2, you added the standard button's content width (3.1rem) to the .button-wider-1 calculation, but forgot that the second "x" button's total width includes its 4px borders. Combined with the extra borders on the .button-wider-2 button itself, this adds up to 8px of unaccounted-for width—making the button overflow past the second "x" button's right edge.

The Fix: Switch to border-box #

The simplest way to resolve this is to use box-sizing: border-box, which makes the width property include both the content area and any borders/padding. This makes width calculations far more intuitive.

Update your global style rule to include box-sizing: border-box:

.mystery, .mystery * { 
  padding: 0; 
  border: 0; 
  margin: 0; 
  box-sizing: border-box; /* Add this line */
}

Then simplify your calc() expressions since borders are now included in the width:

.button-wider-1 {
  /* Standard button width + right margin */
  width: calc(3.1rem + 0.7rem); 
}
.button-wider-2 {
  /* Standard button width + margin + another standard button width */
  width: calc(3.1rem + 0.7rem + 3.1rem); 
}

With these changes, the .button-wider-2 button's total width will exactly match the combined width of the two "x" buttons plus their middle margin. Its right edge will align perfectly with the second "x" button's right edge, just as you expected.

内容的提问来源于stack exchange，提问作者Star Flow