📦 Box Model and Positioning

The Box Model

Picture a framed photo on a wall. The photo itself is the content. The mat board around it is padding — inside the frame, part of the piece. The frame is the border. And the empty wall you leave between this frame and the next is the margin. CSS builds every element out of exactly these four nested layers.

.box {
    width: 300px;              /* content width */
    height: 200px;             /* content height */
    padding: 20px;             /* space inside the border */
    border: 5px solid #333;    /* the frame */
    margin: 10px;              /* space outside, pushing neighbors away */
}

box-sizing: the Sizing Trap

Here's the surprise that catches everyone. By default, width sets the width of the content only — padding and border are then added on top. So a "300px" box can render much wider than 300px.

Default: content-box

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}
/* Actual rendered width = 300 + 20*2 + 5*2 = 350px  😱 */

The fix: border-box

.box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}
/* Actual rendered width = 300px exactly — padding & border grow inward */

Set it once, globally

Nearly every modern stylesheet opts every element into border-box right at the top. Do this and box sizing stops being something you ever think about again:

*, *::before, *::after {
    box-sizing: border-box;
}

Margin & Padding

Shorthand: 1, 2, 3, or 4 values

The margin and padding shorthands read clockwise from the top. The number of values you give changes their meaning:

.a { margin: 10px; }             /* all four sides: 10 */
.b { margin: 10px 20px; }        /* vertical 10 | horizontal 20 */
.c { margin: 10px 20px 15px; }   /* top 10 | horizontal 20 | bottom 15 */
.d { margin: 10px 20px 15px 25px; } /* top | right | bottom | left (clockwise) */

A memory aid for the four-value form: Top, Right, Bottom, Left — "TRouBLe," clockwise starting at 12 o'clock.

Centering with margin: auto

/* Horizontally center a fixed- or max-width block */
.container {
    max-width: 1200px;
    margin: 0 auto;   /* 0 top/bottom, auto left/right splits the leftover space */
}

Margin collapse — the quiet gotcha

When two block elements sit one above the other, their vertical margins don't add up — they collapse to the larger of the two. This only happens vertically, and only with margins (never padding).

.box1 { margin-bottom: 20px; }
.box2 { margin-top: 30px; }
/* The visible gap between them is 30px, NOT 50px */

Borders & Radius

The border shorthand

/* width | style | color — style is required, or nothing shows */
.box { border: 2px solid #333; }

/* Each side can differ */
.box {
    border-top: 2px solid red;
    border-bottom: 1px dotted green;
}

/* Common styles: solid, dashed, dotted, double, none */

Rounded corners

.rounded { border-radius: 10px; }              /* all corners */

.pill    { border-radius: 999px; }             /* fully rounded ends */

.circle  {                                     /* a perfect circle */
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

The display Property

Before an element can be positioned, you need to understand how it flows. The display property sets an element's fundamental behavior in the document.

.badge   { display: inline-block; width: 60px; text-align: center; }
.hidden  { display: none; }   /* gone — takes up no space at all */

Positioning

The position property lets an element break out of the normal document flow and be placed with the offset properties top, right, bottom, and left. There are five values.

1. static — the default

.el { position: static; }
/* Normal flow. top/left/right/bottom have no effect here. */

2. relative — nudge from home

.el {
    position: relative;
    top: 20px;
    left: 30px;   /* moves 20px down and 30px right of where it would sit */
}
/* Its original space is preserved — neighbors don't move in. */

Relative positioning has a second, more important job: it makes an element the reference point for any absolute children inside it.

3. absolute — placed against an ancestor

.parent   { position: relative; }  /* establishes the reference frame */
.badge    {
    position: absolute;
    top: 0;
    right: 0;   /* pins to the top-right corner of .parent */
}
/* Removed from normal flow — other content ignores it. */

4. fixed — pinned to the screen

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;   /* stays put in the corner even as the page scrolls */
}

5. sticky — the hybrid

.section-header {
    position: sticky;
    top: 0;   /* scrolls normally until it reaches the top, then sticks there */
}

Sticky is how table headers and the table of contents on this very page stay visible as you scroll past their section. It behaves like relative until the offset threshold is crossed, then like fixed — but only within its parent's bounds.

Z-index & Stacking

When positioned elements overlap, z-index decides who's on top — higher numbers sit in front. It only affects elements whose position is something other than static.

.behind { position: absolute; z-index: 1; }
.middle { position: absolute; z-index: 2; }
.front  { position: absolute; z-index: 3; }  /* drawn on top of the others */

An element establishes a new stacking context when it is positioned with a z-index, or has properties like opacity below 1, a transform, or a filter. Inside a stacking context, all z-index values are relative to that context — which is why a child with z-index: 9999 can still sit behind an element in a different, higher context.

Practical Layout Patterns

Here's how the pieces combine into things you'll build constantly.

Centered page container

.container {
    max-width: 1200px;
    margin: 0 auto;      /* center horizontally */
    padding: 0 20px;     /* breathing room on small screens */
}

Fixed site header

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}
/* Push page content down so it isn't hidden under the header */
body { padding-top: 60px; }

Centered modal over a dim overlay

.modal-overlay {
    position: fixed;
    inset: 0;                          /* shorthand for top/right/bottom/left: 0 */
    background: rgba(0, 0, 0, 0.5);    /* the dim backdrop */
    z-index: 9999;
}
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* true centering, any size */
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    z-index: 10000;                     /* above the overlay */
}

Practice & Quiz

/* Case A */
.a { width: 200px; padding: 15px; border: 5px solid; }

/* Case B */
.b { box-sizing: border-box; width: 200px; padding: 15px; border: 5px solid; }

<div class="card">
    <span class="badge">NEW</span>
    <h3>Product name</h3>
</div>

.card {
    position: relative;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: crimson;
    color: #fff;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
}

Best Practices & Pitfalls

✅ Do

• Set a global box-sizing: border-box reset at the top of your CSS
• Reach for flexbox or grid for real layout; use positioning for overlays and small nudges
• Use margin: 0 auto to center a fixed- or max-width block horizontally
• Keep a small set of named z-index tiers (e.g. header 1000, modal 10000) instead of random big numbers

❌ Don't

• Expect vertical margins to add up — remember they collapse
• Reach for float to build page layouts; that era ended with flexbox and grid
• Sprinkle z-index: 9999 everywhere; it just moves the fight up a level
• Forget that z-index and offsets do nothing on a static element

.image { float: left; margin-right: 20px; }  /* text wraps around it */

Summary

📚 Additional Resources

• MDN — Introduction to the box model
• MDN — box-sizing
• MDN — position

🚀 What's Next?

You can size, space, and place boxes. Next you'll fill them with beautiful detail: Colors, Typography, and Basic Styling — color formats, font properties, web fonts, backgrounds, and shadows.