The Box Model & Display Modes

Every HTML element is a box. The CSS box model describes how that box is sized — content, padding, border, and margin. Getting this wrong is the source of most CSS layout confusion. Getting it right makes layout intuitive.

The Box Model

┌─────────────────────────────────────────┐
│               MARGIN                    │  (outside the box, transparent)
│  ┌───────────────────────────────────┐  │
│  │            BORDER                 │  │
│  │  ┌─────────────────────────────┐  │  │
│  │  │          PADDING            │  │  │
│  │  │  ┌───────────────────────┐  │  │  │
│  │  │  │       CONTENT         │  │  │  │
│  │  │  │  width × height       │  │  │  │
│  │  │  └───────────────────────┘  │  │  │
│  │  └─────────────────────────────┘  │  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘

.box {
    width: 300px;
    height: 200px;
    padding: 20px;         /* inside the border */
    border: 2px solid #333;
    margin: 16px;          /* outside the border */
}

box-sizing: border-box

By default, width only sets the content area — padding and border are added on top. This is counterintuitive and causes layout math errors. Fix it globally:

/* Always add this — it makes width include padding and border */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Now:
   width: 300px with padding: 20px = content is 260px wide
   The element is still exactly 300px wide on screen
   
   Without border-box:
   width: 300px with padding: 20px = element is 340px on screen (300 + 20 + 20)
*/

Margin & Padding

/* Shorthand: top right bottom left */
margin: 10px 20px 15px 5px;

/* Shorthand: vertical horizontal */
margin: 10px 20px;

/* All sides */
margin: 10px;

/* Individual sides */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* Auto centering (requires width to be set) */
margin: 0 auto;

/* Padding works the same */
padding: 16px 24px;

Margin Collapse

Vertical margins between adjacent blocks collapse to the larger of the two:

/* These two paragraphs — space between them is 24px, NOT 16px + 24px */
p { margin-bottom: 16px; }
h2 { margin-top: 24px; }

/* Solutions:
   - Use padding instead
   - Add border or padding to parent
   - Use flexbox/grid (no collapse in flex/grid containers)
*/

Display Property

/* Block — full width, stacks vertically */
display: block;
/* Examples: div, p, h1-h6, ul, li, section, article */

/* Inline — flow with text, no width/height */
display: inline;
/* Examples: span, a, strong, em */

/* Inline-block — inline flow but accepts width/height */
display: inline-block;

/* None — remove from layout completely */
display: none;

/* Flex — enables flexbox layout */
display: flex;

/* Grid — enables grid layout */
display: grid;

/* Flow containers */
display: flow-root;  /* contains floats without overflow:hidden hacks */

Visibility vs Display

/* display: none — removed from layout, no space taken */
.hidden { display: none; }

/* visibility: hidden — invisible but still takes space */
.invisible { visibility: hidden; }

/* opacity: 0 — invisible but still takes space AND captures events */
.transparent { opacity: 0; }

/* For accessible hiding (visible to screen readers) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

Width & Height

.box {
    /* Fixed */
    width: 400px;
    height: 300px;
    
    /* Percentage of parent */
    width: 100%;
    height: 50%;
    
    /* Viewport units */
    width: 100vw;   /* full viewport width */
    height: 100vh;  /* full viewport height */
    min-height: 100dvh; /* dynamic viewport height (mobile-safe) */
    
    /* Content-based */
    width: fit-content;   /* shrink to content width */
    width: max-content;   /* don't wrap text */
    width: min-content;   /* wrap as tightly as possible */
    
    /* Clamp: min, preferred, max */
    width: clamp(300px, 50%, 800px);
    
    /* Constraints */
    max-width: 1200px;
    min-width: 200px;
    max-height: 400px;
}

Overflow

.container {
    overflow: visible;  /* default — content escapes box */
    overflow: hidden;   /* clip content */
    overflow: scroll;   /* always show scrollbars */
    overflow: auto;     /* scrollbar only when needed */
    
    /* Axis-specific */
    overflow-x: hidden;
    overflow-y: auto;
    
    /* Modern: allow keyboard scrolling for accessibility */
    overflow: auto;
    /* (always tabindex="0" on scrollable regions too) */
}

/* Text overflow */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* "..." at end of clipped text */
    max-width: 200px;
}

/* Multi-line truncation */
.clamp-3-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Borders

.box {
    /* Shorthand */
    border: 2px solid #333;
    
    /* Individual */
    border-top: 1px dashed red;
    border-right: none;
    
    /* Border properties */
    border-width: 2px;
    border-style: solid | dashed | dotted | double | none;
    border-color: #333;
    
    /* Rounded corners */
    border-radius: 8px;           /* all corners */
    border-radius: 8px 0 8px 0;  /* top-left, top-right, bottom-right, bottom-left */
    border-radius: 50%;           /* circle (when width = height) */
    border-radius: 100px;         /* pill shape */
    
    /* Outline (doesn't affect layout) */
    outline: 2px solid blue;
    outline-offset: 4px;
}

Next lesson: Flexbox — the complete guide to one-dimensional layout.