Width controls how wide an element is, while height controls how tall an element is. These properties are commonly used with divs, images, containers, cards, buttons, forms, and other page elements.

Basic Syntax

selector {
    width: value;
    height: value;
}

Width & Height Diagram

← Width: 280px →

CSS Element

Height: 140px

Simple Explanation

Imagine an HTML element as a rectangular box.

Width controls the horizontal size of the box.

Height controls the vertical size of the box.

For example, if a box has a width of 300px and a height of 120px, the browser creates a box that is 300 pixels wide and 120 pixels tall.

Example 1: Width and Height in Pixels

Pixels are commonly used when you want to give an element a specific size.

.box {
    width: 300px;
    height: 120px;
    background-color: lightblue;
    border: 2px solid blue;
}

Output

CIIT Training Institute

Example 2: Width Using Percentage

Percentage values allow an element to use a portion of the available width of its parent container.

.box {
    width: 50%;
    height: 100px;
    background-color: lightgreen;
    border: 2px solid green;
}

Output

50% Width

Here, the element uses 50% of the available width of its parent container.

This is useful when creating responsive layouts because the width can change according to the size of the parent element.

Example 3: Using min-height

Sometimes the amount of content inside an element can change. In that situation, using min-height can be more flexible than using a fixed height.

.box {
    width: 400px;
    min-height: 120px;
    background-color: lightyellow;
    border: 2px solid orange;
    padding: 15px;
}

Output

CIIT Training Institute

This box has a minimum height of 120px. If more content is added, the box can grow automatically.

Width Related Properties

width

Sets the normal width of an element.

min-width

Defines the minimum width an element can have.

max-width

Defines the maximum width an element can have.

Height Related Properties

height

Sets the normal height of an element.

min-height

Defines the minimum height an element can have.

max-height

Defines the maximum height an element can have.

Common Width and Height Values

Value	Example	Description
px	width: 300px;	Sets a fixed size in pixels.
%	width: 50%;	Uses a percentage of the parent element.
auto	width: auto;	Lets the browser calculate the size.
vw	width: 50vw;	Uses a percentage of the viewport width.
vh	height: 50vh;	Uses a percentage of the viewport height.

Important: The final visible size of an element can also be affected by padding and border. Later, you will learn how the box-sizing property helps control this behavior.

Summary

CSS width controls the horizontal size of an element, while height controls its vertical size. Values such as pixels, percentages, auto, vw, and vh can be used. The min-width, max-width, min-height, and max-height properties provide additional control when building flexible and responsive layouts.

← Previous: CSS Box Model

Next: Padding →