Content updated
By the end, you can…
- Padding is inside the border. Margin is outside. box-sizing decides what a declared width includes.
- Explain the example, change one value, and check the result in your own page.
One idea at a time
Every visible element participates in CSS layout through boxes. For an ordinary block box, read the layers from inside outward: content, padding, border, then margin. The background paints behind content and padding, while margin is outside the element's border. Changing these layers can move other content even when the text stays exactly the same.
With content-box sizing, a declared width describes only the content width. A 200px content area with 20px padding on each side and a 5px border has a 250px border-box width. The example adds 10px left and right margins, so the horizontal total is 270px. In ordinary stacked blocks, adjacent vertical margins can collapse into one gap rather than adding together; two positive margins of 10px and 20px can leave 20px.
What to remember first
Padding is inside the border. Margin is outside. box-sizing decides what a declared width includes.
Read the CSS before trying it
width / max-widthRequested width and upper limit- A width controls the box's size according to box-sizing. max-width sets an upper limit. max-width: 100% limits it to the parent’s content width; use border-box if padding and borders must fit in that limit too.
paddingInside spacing- One value applies to all sides; two mean top/bottom then left/right; three mean top, left/right, bottom; four go top, right, bottom, left.
borderThe edge- 5px solid #1e3a8a combines thickness, line style, and color. dashed and dotted change the edge style.
marginOutside spacing- Separates boxes. Automatic horizontal margins can center a block whose width leaves spare space; auto is not a universal centering rule.
box-sizingHow width is measured- content-box excludes padding and border. border-box includes both, but still excludes margin.
Walk through an example
<div class="box">Content</div>
<p>The paragraph after the box stays in normal flow.</p>.box {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid #1e3a8a;
margin: 10px;
background-color: #eff6ff;
}Find the blue border first. The pale space between Content and that border is padding. Space outside the blue edge is margin. In the first version, the border-box width is 250px. In the border-box version, the same declared 200px includes padding and borders, so only 150px remains for the content. The external margins still occupy their own space.
See it happen: try a small change
Predict what will change, choose a version, and compare the live result with the CSS. Use the real controls when the example includes them.
Code to notice
.box {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid #1e3a8a;
margin: 10px;
background-color: #eff6ff;
}Live result
What changed: 200 + 40 padding + 10 border = 250px before margins.
Look a little closer
A common starting rule is * { box-sizing: border-box; }. The universal selector applies that sizing model broadly so arithmetic is easier to predict. It does not remove padding or margins. In the demo, the box has an explicit sizing rule to override the preview's starting styles and make the comparison reliable.
Avoid fixed heights for boxes that contain writing. A longer sentence, translated text, or zoom can need more lines. Let content determine height unless the component genuinely needs a constrained region with an accessible overflow behavior. A rounded border changes the corner shape, not which parts count toward the width.
Try it in your own project
Use the supplied box and following paragraph. Keep width, padding, border, and margin unchanged while switching box-sizing. Compare the 250px and 200px border widths, then add a longer sentence to observe the height grow.
The preview uses a small set of readable starting styles for its font, spacing, and controls. The code to notice shows the lesson's own rules. Your local browser defaults may look different before you add those rules; focus on the relationship being demonstrated rather than matching every pixel of the preview.
A common wrong turn
Adding padding to a content-box element can make it wider than you expected. Hiding overflow conceals the symptom rather than fixing the dimensions. Inspect the layers and sizing model first, then choose a width that fits its parent.
Your turn: understand the space around a box
Build a reading card, identify its four layers, and compare the same width under both sizing models.
Try this task in your own index.html and styles.css files. Save both files and refresh your browser to see changes. Continue below follows the course order, including its practice checkpoint.
Related practice in the course path
This practice appears in CSS fundamentals, step 6. Follow Continue below to reach it after its prerequisites.
For related guided practice, Style a reading card gives you starter code, a live preview, hints, and checks. The task above is a separate variation to try in your own project.
- Give one box a width, visible border, background, padding, and margin.
- Switch only box-sizing and predict 250px versus 200px before margins. To verify, right-click the box, choose Inspect, and find the box-model diagram in the Styles, Computed, or Layout panel. These are built-in browser developer tools; panel names vary.
- Add a longer sentence. Confirm that the card grows in height instead of cutting off text.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.