Which sequence lists the standard box-model areas from the center outward?
Choose an answer, then check it.
Web Development · Foundations
The CSS Box Model
On this page 9 sections
In 30 seconds
Browsers lay out most CSS elements as boxes. From the center outward, a box has a content area, optional padding Space between an element’s content area and its border. Full entry →, a border The edge drawn around an element’s padding and content areas. Full entry →, and a margin Space outside an element’s border that separates it from neighboring boxes. Full entry → outside the border. A declared width does not always mean the same thing: box-sizing: content-box measures the content area, while box-sizing: border-box includes padding and border in that declared width. Margin remains outside either sizing box. Keeping those layers separate makes unexpected gaps and widths understandable.
Why this matters
The box model turns a vague visual problem—“why is this card wider than 320 pixels?”—into quantities you can inspect. It is central to reading browser developer tools, setting predictable component dimensions, and explaining spacing decisions to teammates. It also prevents a frequent maintenance error: changing a width without noticing that padding and borders change the element’s outer footprint under the default sizing model. This lesson focuses on an individual element’s dimensions; flexbox, grid, and positioning decide broader layout relationships later.
The college version
Four nested areas, each with a job
CSS describes an element as a rectangular box. Its content area is where text, an image, or child content is laid out. Padding is the space between that content and the border. A border draws around the padding and content. Margin is the space outside the border that separates the element from nearby boxes. These are not four alternative names for “empty space”: they occupy different locations and respond to different CSS properties. For a box with visible content, the layers run outward as content, padding, border, and margin. Padding can show the element’s background; a border can be visible or have zero width; margin is outside the border.
A useful debugging habit is to ask which boundary a measurement refers to. The content width answers how much horizontal room the content gets. The border edge encloses content, padding, and border. The margin edge goes farther out when margins are present. A background or a click target may appear to extend through padding, whereas a margin creates separation outside the element. The exact visual result can also involve other CSS rules, but naming the relevant edge is the first step. This lesson is about the dimensions of one box, not about using flexbox, grid, or positioning to distribute many boxes.
Declared width depends on box-sizing
The box-sizing property states how CSS applies a specified width or height. The initial model, content-box, treats width as the content width. Horizontal padding and horizontal border widths are then added outside that declared width. Therefore, an element with width: 300px, padding: 20px, and border: 5px solid has a border-box width of 350 pixels: 300 + 20 + 20 + 5 + 5. If it also has margin: 12px, its outer horizontal footprint is 374 pixels after adding both margins. Margins are not part of the border box The rectangle formed by an element’s content, padding, and border, excluding margin. Full entry →.
With box-sizing: border-box, the declared width instead includes the content, padding, and border. A width: 300px border box remains 300 pixels wide at its border edge; padding and border reduce the remaining content width rather than making that border box wider. Margins still sit outside and can increase the space the element occupies among neighbors. Neither model is universally “right.” The point is to choose and read one deliberately. A stylesheet may set border-box broadly because component dimensions are easier to reason about that way, while a specific component can still use another model when its design calls for it.
Calculate first, then inspect the right edge
When a visible width surprises you, write a small accounting statement rather than guessing. Under content-box, start with the declared content width. Add left and right padding, then left and right border widths, to reach the border-box width. Add left and right margins only if the question asks about the total external footprint. Under border-box, the declared width is already the border-box width; do not add padding and border a second time. Add margins only for the external footprint. The same layer-by-layer reasoning applies vertically with height, top and bottom padding, borders, and margins.
For example, .notice { box-sizing: content-box; width: 240px; padding: 16px; border: 2px solid; margin: 10px; } has a 276-pixel border-box width: 240 + 16 + 16 + 2 + 2. Including both margins, it spans 296 pixels of horizontal space. Changing only box-sizing to border-box while keeping width: 240px makes the border-box width 240 pixels; its content area must share that 240 pixels with the two padding and border sides. Developer tools can show these layers visually, but the arithmetic tells you what to expect before opening them. Record the sizing model beside any component dimension in a design note. This calculation says nothing about which element gets placed where; that belongs to later layout topics.
Eli explains
The same idea, in plain words
Explain it like I’m 10
Imagine packing an object for shipping. The object is the content. Bubble wrap around it is padding. The cardboard carton is the border. The empty clearance you leave between cartons on a shelf is margin. They all affect how much room the package needs, but they are in different places.
CSS has two ways to read a label saying a package is 300 pixels wide. With content-box, the label measures only the object area, so bubble wrap and carton make the outside bigger. With border-box, the label measures the carton’s outside, so the object gets less room after wrap and carton take their share. Shelf clearance—margin—is outside either measurement.
Picture it like this
The shipping package separates inner space, protective layers, an outer wall, and clearance around the package.
Where the picture stops working
A CSS border need not look like cardboard, and CSS margins do not physically push every neighbor in every layout situation. The analogy is for box boundaries and measurement, not a full browser layout simulation.
Worked example
Consider .card { box-sizing: content-box; width: 240px; padding: 16px; border: 2px solid; margin: 10px; }. The width is content width, so calculate the border-box width as 240 + 16 left padding + 16 right padding + 2 left border + 2 right border = 276px. The card’s margins are outside its border. If the question is how much horizontal room the card and its margins occupy, add 10px on each side: 276 + 10 + 10 = 296px. If the rule changes to box-sizing: border-box while retaining width: 240px, then 240px is already the border-box width; the two padding and border sides share that width with the content, and the two margins make its external footprint 260px.
Key takeaway
The box model separates content, padding, border, and margin. Before calculating a width, identify whether box-sizing measures the content box or the border box, and add margins only when the external footprint matters.
Quick check
3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.
Under box-sizing: border-box, what does a declared width include?
Choose an answer, then check it.
A content-box element has width: 200px, left and right padding of 10px, and left and right borders of 3px. What is its border-box width?
Choose an answer, then check it.
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related
You’ll learn to
- Define the four areas of the CSS box model.
- Distinguish content-box sizing from border-box sizing.
- Calculate an outer horizontal size under content-box sizing.
- Explain why margin is separate from a border box.
- Apply box-sizing to diagnose a width mismatch.
Common mistakes
Assuming a declared width always describes the visible outer width.
Check box-sizing. With content-box, padding and border add beyond the declared width.
Adding margin when calculating a border-box width.
Margin is outside the border box; add it only when calculating external footprint.
Treating padding as empty margin around an element.
Padding lies inside the border, between content and border; margin lies outside the border.
Using a box-model calculation to explain flex or grid placement.
Use the box model for one box’s dimensions; learn layout systems separately for placement among boxes.
Easily confused
content-box vs. border-box
Content-box applies declared width to content alone; border-box applies it to content, padding, and border together.
padding vs. margin
Padding is inside the border; margin is outside the border.
Key vocabulary
- CSS box model
- A model that describes an element’s content, padding, border, and margin areas.
- content box
- The area allocated to an element’s content before its padding and border are added in content-box sizing.
- padding
- Space between an element’s content area and its border.
- border
- The edge drawn around an element’s padding and content areas.
- margin
- Space outside an element’s border that separates it from neighboring boxes.
- border box
- The rectangle formed by an element’s content, padding, and border, excluding margin.
- box-sizing
- The CSS property that selects whether specified width and height use the content box or border box.
Sources & references
- The box model — MDN Web Docs
- box-sizing CSS property — MDN Web Docs
- CSS Box Sizing Module Level 3 — W3C CSS Working Group
EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.
Researched 2026-08-20
Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.