Every element has a box
A browser lays out most HTML elements as rectangular boxes. The CSS box model describes the layers of each box, from the inside out: content, padding, border, and margin. Understanding those layers helps explain why an element can take up more room than its declared width suggests.
The content area holds text, images, or other elements. Padding creates space between that content and the border. The border surrounds the padding and content. Margin creates space outside the border, separating the element from its neighbors. A background color generally extends through the padding but not the margin, which makes the two kinds of space easier to tell apart.
Calculate a box’s width
By default, CSS uses content-box sizing. With this setting, a declared width applies to the content area alone. Padding and borders add to the visible width. For example, consider this rule: .card { width: 200px; padding: 20px; border: 2px solid; margin: 10px; }. The content is 200 pixels wide. Left and right padding add 40 pixels, and left and right borders add 4 pixels, making the border-to-border width 244 pixels.
The two 10-pixel margins sit outside that 244-pixel box. If both margins apply in the available space, the element needs 264 pixels from its left margin edge to its right margin edge. That figure is useful for understanding this example, but real layouts can also be affected by the parent’s width and the layout method in use.
Padding is useful when text feels cramped inside a button or card. Margin is useful when separate elements need breathing room. If you want a colored gap inside a card, use padding; if you want space between the card and nearby elements, start with margin.
What box-sizing changes
The box-sizing property changes what a declared width includes. Set box-sizing: border-box, and the width includes the content, padding, and border. Applied to the same .card rule, a declared width of 200 pixels now means a border-to-border width of 200 pixels. Its 20-pixel padding on each side and 2-pixel borders leave 156 pixels for the content. Margins remain outside the declared width.
Many layouts are easier to reason about with border-box because adding padding does not make a fixed-width element wider. To use it throughout a small page, you can write: *, *::before, *::after { box-sizing: border-box; }. The selector includes ordinary elements and their before and after pseudo-elements. This rule does not remove padding or margins; it only changes how width and height are calculated.
A declared width is not a promise that every piece of content will fit neatly. Long unbroken text or an image may still cause overflow. If a box seems wider than expected, check its contents as well as its box-sizing value.
Margins have a few surprises
Margins are not always added together. In normal block layout, adjoining vertical margins can collapse into one gap. If one paragraph has a 20-pixel bottom margin and the next has a 30-pixel top margin, the gap may be 30 pixels rather than 50. Horizontal margins do not collapse this way. Flex and grid layouts also handle spacing differently, so do not rely on margin collapse without checking the layout context.
Margins can also be set to auto. For a block with a suitable width, margin-left: auto and margin-right: auto can share the remaining horizontal space and center the box within its containing area. That centers the box, not necessarily the text inside it; text-align controls text alignment.
Inspect a box in your browser
You can explore the model with a text editor and a modern browser; no library or particular browser version is required. Create an HTML file with a div containing a short sentence, then apply the .card rule above in a style element. Give the card a background color so you can see the padded area. Open the file in your browser, right-click the card, and choose Inspect to open developer tools.
Look for the box-model diagram in the element’s computed styles. It typically shows the content dimensions and the padding, border, and margin on each side. Change box-sizing from content-box to border-box, then compare the displayed widths. Try changing padding and margin separately: padding moves the content inward, while margin changes the space outside the border.
When a layout does not fit, inspect the element before changing several CSS rules at once. Check the declared width, computed box-sizing, padding, borders, margins, and any content that might overflow. A single measurement often reveals which layer is responsible.
