CSS Size Summary

CSS size properties control how wide or tall an element’s box can be.

The most common size properties are width, height, max-width, and min-height. They help elements fit the design without breaking the page.

.card {
	width: 300px;
	min-height: 180px;
}

Width Controls Horizontal Size

The width property sets how wide an element should be.

.sidebar {
	width: 280px;
}

A fixed width can be useful for small parts of a layout, but it can also cause problems on narrow screens.

The max-width property lets an element shrink when needed but prevents it from growing past a limit.

.wrapper {
	max-width: 900px;
	margin: 0 auto;
}

This is common for page wrappers because it keeps content readable on wide screens while still fitting smaller screens.

The height property sets a fixed vertical size. Fixed heights can cut off content when text wraps or more content is added.

.hero {
	min-height: 400px;
}

min-height is often safer because it gives the element a starting height while still allowing it to grow.

Padding, border, and margin also affect the space an element uses. The Box Model lesson explains how those parts fit together.