CSS — Height and Width

The sizing properties

.box {
    width: 300px;
    height: 150px;
    background: teal;
}

What the browser displays

(A teal rectangle exactly 300×150 pixels.)

auto — the smart default

By default, block elements already size themselves:

/* width: auto (default) = fill the parent */
p { /* stretches edge to edge */ }

/* height: auto (default) = fit the content */
.card { /* grows as you add text */ }

Most layout "just works" because of these defaults. Set dimensions only when you actually need to override them — unnecessary fixed sizes are a top source of broken responsive pages.

Units cheat sheet

Unit	Meaning	Use
px	Fixed pixels	Icons, borders, precise UI bits
%	Percent of the parent	Fluid columns, images
rem	Relative to root font size	Scalable spacing/text
vw / vh	1% of viewport width/height	Full-screen sections
auto	Browser computes	Default behavior

Percentages are relational

.parent { width: 500px; }

.half   { width: 50%; }    /* = 250px inside .parent */

Change the parent and children follow automatically.

Viewport units

.hero { height: 100vh; }   /* exactly one full screen tall */

The landing-page staple: content filling the whole first screen regardless of device.

min- and max- guards

Fixed sizes break on other screens; limits don't:

.container {
    max-width: 1000px;     /* grows up to here…      */
    margin: 0 auto;        /* …then centers          */
}

.photo {
    max-width: 100%;       /* never exceed its box   */
    height: auto;          /* keep proportions       */
}

.comment-box {
    min-height: 120px;     /* never collapses smaller */
}

That photo rule is the most-copied CSS snippet in history:

img { max-width: 100%; height: auto; }

Two lines make every image shrink gracefully on phones instead of exploding the layout.

The perfect container pattern

.content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

Reads as: "center a column up to 1100px wide; on smaller screens leave 24px side gutters." Nearly every professional site's body is some version of this.

The width + padding trap

.box {
    width: 200px;
    padding: 20px;
    border: 4px solid black;
}

Actual rendered width: 200 + 40 + 8 = 248px. Declared width covers content only by default — padding and border stack on top.

The universal fix

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

Now width includes padding and borders — what you declare is what renders. Every modern project starts with this reset; the box-model lesson expands on why.

Keeping proportions

Old trick for fixed-ratio embeds (videos!):

.video-frame {
    position: relative;
    padding-top: 56.25%;       /* 16:9 ratio */
}
.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

Modern one-liner:

.video-frame {
    aspect-ratio: 16 / 9;
}

Height gotchas

1. Percentage heights need a sized parent — height: 100% does nothing if mom has no defined height
2. Content overflows fixed heights — text spills or gets cut; prefer min-height
3. Empty divs collapse with height: auto — give them min-height or real content

Mini Practice

1. Build the .content container pattern; resize the window and watch it cap at max-width while staying centered
2. Apply the two-line image rule to a huge photo; narrow the window — no overflow
3. Make a 100vh hero section with centered text
4. Reproduce the 248px trap, then fix it with global border-box
5. Give a card aspect-ratio: 1/1 and put different-length text inside — watch it stay square-ish via min-height instead

Next: the box model →