CSS Width & Height

The CSS width and height properties control the dimensions of an element's box.

These properties can use fixed lengths, percentages, relative units, and other CSS sizing values. Their exact effect also depends on the element's box sizing and layout context.

The width Property

The width property sets the width of an element's box. With the default box-sizing: content-box, it specifies the width of the content area.

.box {
  width: 300px;
}

This example gives the content area of the box a width of 300px. Padding and borders, if present, are added outside that width when content-box sizing is used.

The height Property

The height property sets the height of an element's box. With box-sizing: content-box, it specifies the height of the content area.

.box {
  height: 150px;
}

A fixed height can be useful when a design requires a particular dimension, but it should be used carefully when the amount of content can change.

Automatic Width and Height

The initial value of both width and height is auto. This allows the browser to determine the used dimensions according to the element and its layout context.

.box {
  width: auto;
  height: auto;
}

For a block element in normal flow, an automatic width generally uses the available inline space. An automatic height normally allows the box to grow as needed to contain its content.

For content that can change, leaving the height automatic is often safer than assigning a fixed height.

Length Values

The width and height properties can use CSS length units such as pixels, em, rem, and viewport units.

.pixels {
  width: 300px;
}
.relative {
  width: 20rem;
}
.viewport {
  width: 50vw;
}

A fixed unit such as px provides a specific CSS size, while relative units can respond to font sizes or viewport dimensions.

Percentage Values

A percentage width is calculated relative to the width of the element's containing block.

.box {
  width: 75%;
}

This allows the element to grow or shrink as the available width of its containing block changes.

Percentage heights require more care. A percentage height generally depends on the containing block having a height that provides a definite basis for calculating the percentage.

.container {
  height: 400px;
}
.box {
  height: 50%;
}

In this example, the box can use 50% of the container's 400px height.

Width and Height in the Box Model

By default, CSS uses box-sizing: content-box. This means declared width and height values apply to the content area rather than the complete border box.

.box {
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 5px solid steelblue;
}

The content area is 300px wide and 150px high. Padding and borders increase the overall dimensions of the border box.

With these values, the border-box width is 350px and the border-box height is 200px.

Width:
300px content
+ 40px padding
+ 10px border
= 350px

Height:
150px content
+ 40px padding
+ 10px border
= 200px

The later Box Sizing tutorial explains how box-sizing: border-box allows padding and borders to be included within the declared width and height.

Content and Fixed Heights

A fixed height does not guarantee that the content will fit inside the element. If the content requires more space than the specified height provides, it can overflow the box.

.box {
  width: 300px;
  height: 50px;
}

For elements containing text or other content that may change, allowing the height to remain auto often produces a more flexible layout.

When a fixed or limited size is necessary, the overflow property can control how content that exceeds the available space is handled. Overflow is covered later in this section.

Responsive Sizing

Fixed widths can cause problems when the available space becomes narrower than the element. Relative sizing can make an element more adaptable.

.box {
  width: 100%;
}

A percentage width allows the box to respond to the size of its containing block. Minimum and maximum sizing properties can provide additional control over how far an element is allowed to shrink or grow.

.box {
  width: 100%;
  max-width: 600px;
}

The min-width, max-width, min-height, and max-height properties are covered later in the Minimum & Maximum Sizes tutorial.

Width and Height Example

The following example gives the box an explicit width and height so you can see how the two properties control its dimensions.

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

Open the example in the editor and change the width and height values. Try values such as 200px, 400px, 50%, or 20rem and run the example to see how the box changes.

Play in Editor