CSS Height and Width

The height and width properties in CSS define the size of an HTML element's content area. These properties are fundamental for controlling the layout and size of boxes, containers, images, buttons, and any visible element on the page.

Setting Width and Height

div {
    width: 400px;
    height: 200px;
    background-color: lightblue;
}

This creates a light blue box that is 400 pixels wide and 200 pixels tall.

Units for Width and Height

Several types of units can be used to define dimensions in CSS.

Pixels (px)

Fixed size in pixels. Does not change based on the screen size.

div { width: 300px; height: 150px; }

Percentage (%)

Size is relative to the parent element's width or height. Very useful for responsive layouts.

div { width: 50%; }  /* Takes up half the width of its parent */

em and rem

em is relative to the current element's font size. rem is relative to the root (<html>) font size. These are useful for scalable designs.

div { width: 20em; }   /* 20 times the font size of the element */
div { width: 20rem; }  /* 20 times the root font size */

Viewport Units (vw and vh)

vw stands for viewport width and vh stands for viewport height. 1vw = 1% of the screen width, 1vh = 1% of the screen height.

section { width: 100vw; height: 100vh; }  /* Full screen width and height */

max-width and min-width

These properties set the maximum and minimum allowed width of an element.

max-width

Limits how wide an element can grow, even if the screen is wider. Prevents content from stretching too wide on large screens.

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

The container stretches to fill the screen on smaller devices but stops expanding at 1100px on large screens.

min-width

Ensures an element is never narrower than the specified value, even on very small screens.

.button {
    min-width: 120px;
}

max-height and min-height

These work the same way as their width counterparts but control vertical size.

.text-box {
    min-height: 100px;  /* Will never be shorter than 100px */
    max-height: 400px;  /* Will never be taller than 400px */
    overflow: auto;     /* Shows a scrollbar if content exceeds max-height */
}

width: auto vs width: 100%

These two values behave differently and are often confused.

width: auto – The element takes only as much width as its content needs, plus padding and border. This is the default for inline and inline-block elements.
width: 100% – The element fills the full width of its parent. If padding or border is added, the total width may exceed the parent's width (unless box-sizing: border-box is used).

/* width: auto — shrinks to fit content */
.tag {
    display: inline-block;
    width: auto;
    padding: 5px 12px;
}

/* width: 100% — fills the parent container */
input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

Height: auto

The default height for most elements is auto, meaning the element grows vertically as content is added. This is usually the desired behavior for flexible, content-driven layouts.

article {
    height: auto;  /* Grows with content — default behavior */
}

Complete Example

.profile-card {
    width: 280px;
    min-height: 200px;
    max-width: 100%;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
}

Summary

The width and height properties set the size of an element's content area. Common units include px, %, em, rem, vw, and vh. Using max-width and min-width creates flexible designs that adapt to different screen sizes. Height is usually left as auto to let content grow naturally, while width is more commonly fixed or percentage-based in layouts.

Previous lessons

Back to courses

Next lessons