CSS box-sizing: include padding and borders in a declared size

When to use it

A case summary card must fit a 24-rem slot even after a one-pixel border and internal padding are added. Border-box makes that width contract easier to maintain. It does not include margins, and it does not solve a long unbroken identifier that refuses to wrap. Apply the rule to the component or establish it in a deliberate reset, then inspect a real card at narrow width. The sample keeps the maximum width within the containing region. Changing box-sizing on an existing site can shift layouts that were calculated under content-box, so audit fixed-width fields and older components before making it global. Check the actual rendered box in developer tools rather than guessing from the declared inline size.

.case-summary { box-sizing: border-box; inline-size: 24rem; max-inline-size: 100%; padding: 1.25rem; border: 1px solid #aebfcb; }
.case-summary__id { overflow-wrap: anywhere; }

Cost and verification

Box-sizing has negligible runtime cost; the migration cost is in assumptions embedded in existing widths. A card that previously occupied 24 rem plus padding becomes narrower internally when switched to border-box. Verify labels, buttons, and long IDs at 200% zoom. Keep margin outside the declared width calculation and avoid adding a width of 100% to a child that also has external margins. Use one sizing model per component family so later edits do not require mental arithmetic across mixed models.

Common Mistakes

• Do not assume border-box includes margins.
• Do not change a site-wide reset without checking old fixed-width components.
• Do not use box-sizing to hide content overflow.

Connected lessons

• CSS Property Decisions
• CSS box model and layout: size content without accidental overflow
• CSS intrinsic sizing: let content set limits without forcing overflow
• CSS text wrapping and truncation: keep records readable