Suggest an editImprove this articleRefine the answer for “What is content-box?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`content-box`** is the default `box-sizing` model, where `width` and `height` apply only to the content area, while `padding` and `border` are added on top of the size. **Key point:** this makes the actual element size larger than the specified `width`/`height`, for example 200px content + 40px padding + 10px border = 250px.Shown above the full answer for quick recall.Answer (EN)Image`content-box` is the standard (default) model for calculating an element's width and height in CSS. With `box-sizing: content-box;`, the `width` and `height` properties apply **only to the content area**, and `padding` and `border` are added on top of the size. Example: ```css div { box-sizing: content-box; width: 200px; padding: 20px; border: 5px solid; } ``` The actual width of the block will be: ```javascript 200 (content) + 20+20 (padding) + 5+5 (border) = 250px ``` Summary: with `content-box`, the element ends up larger than the specified `width`/`height`, because the inner area is calculated separately from the padding and borders.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.