CSS Box Model: Margin, Border and Padding

Identify the four areas

Inspect a simple block element in browser developer tools. Find its content, padding, border and margin in the box-model view. Padding creates space inside the border, while margin controls space outside it. Use the highlighted diagram to determine which declaration creates a visible gap before changing unrelated layout properties.

Calculate the content-box example

The example declares a 200px content width, 12px padding on each horizontal side and a 3px border on each horizontal side. With content-box sizing, the border-box width is 200 + 24 + 6 = 230px. The two horizontal 10px margins sit outside that box; they do not become part of the 230px border-box measurement.

Calculate the border-box example

For the second element, border-box includes horizontal padding and border within the declared 200px width. With these values, the remaining content width is 200 - 24 - 6 = 170px. Margin remains outside. These calculations describe the supplied fixed-width block example; other layout constraints can influence an element's used size.

Measure before fixing overflow

Copy the complete HTML into a local file and open it in a browser. Select each sample in developer tools and record its border-box width. The first should measure 230px and the second 200px. Change padding to 20px and recalculate both values before checking again. Do not include margin in a bounding-rectangle measurement.

Choose the right spacing tool

Use padding when content needs breathing room inside a component, and margin or a parent layout's gap when separate components need space between them. Check margin collapsing when vertical block margins behave unexpectedly. border-box helps make declared widths easier to reason about, but it does not automatically fix oversized children, unbroken content or every overflow problem.

Practice a responsive card

Create a second version with width: 100%, max-width: 24rem and box-sizing: border-box. Add a long course title, then test a narrow viewport and browser zoom. Confirm that the text wraps and the card stays within its container. Record the declaration responsible for any overflow rather than hiding horizontal overflow on the whole document.

Copy into box-model.html

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Measure the CSS box model</title>
<style>
  .sample {
    width: 200px;
    padding: 12px;
    border: 3px solid navy;
    margin: 10px;
    overflow-wrap: anywhere;
  }
  .content { box-sizing: content-box; }
  .border { box-sizing: border-box; }
</style>
<div class="sample content">Content-box example</div>
<div class="sample border">Border-box example</div>
</html>

Expected result

First border-box width: 230px
Second border-box width: 200px
Both have 10px margins outside their border boxes.

Further reading

• MDN: box-sizing
• MDN: the box model