Width & Height

CSS Width & Height

The CSS width and height properties control the dimensions of an element. They can use fixed or relative values, or allow the browser and normal layout to determine how much space an element needs.

The width and height Properties

The CSS width property controls an element's width, while the height property controls its height. These properties can be used separately or together.

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

Setting Width

The width property can give an element a specific horizontal size.

div {
  width: 250px;
}

With the default box-sizing: content-box; behavior, this sets the content area to 250 pixels wide. Any horizontal padding and borders are added outside that width.

A fixed width can be useful when an element needs a specific size, but flexible widths are often better when a page must adapt to different screen sizes.

Setting Height

The height property can give an element a specific vertical size.

div {
  height: 120px;
}

With the default content-box sizing, this sets the height of the content area to 120 pixels. Vertical padding and borders are added outside that height.

If the content requires more vertical space than the specified height provides, the content can overflow the element.

The auto Value

The initial value of both width and height is auto. This allows normal CSS layout to determine the used dimensions of the element.

div {
  width: auto;
  height: auto;
}

For a typical block element in normal flow, an automatic width uses the available horizontal space, while an automatic height expands as needed to contain its in-flow content.

Leaving height as auto is often useful for text content because the element can grow when more text is added or when text wraps onto additional lines.

Length Values

The width and height properties accept CSS length units such as px, em, and rem.

.pixels {
  width: 300px;
}

.relative {
  width: 20em;
}

Pixel values provide fixed CSS dimensions, while relative units such as em and rem scale according to font-size values.

Percentage Values

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

div {
  width: 75%;
}

If the containing block is 800 pixels wide, a width of 75% produces a used width of 600 pixels before considering how the box model affects the final border-box size.

Percentage heights behave differently because they generally require the height of the containing block to be explicitly established before the percentage can be resolved.

Width, Height, and the Box Model

With the default box-sizing: content-box;, declared width and height values apply to the content box. Padding and borders are added around it.

div {
  width: 300px;
  height: 100px;
  padding: 20px;
  border: 5px solid #333333;
}

The horizontal padding adds 40 pixels and the horizontal borders add 10 pixels, making the border-box width 350 pixels.

300px content width
+ 40px horizontal padding
+ 10px horizontal border
= 350px border-box width

The same principle applies vertically: 100 pixels of content height plus 40 pixels of vertical padding and 10 pixels of vertical border produces a border-box height of 150 pixels.

Later in this section, the Box Sizing tutorial explains how box-sizing: border-box; changes this calculation.

Try Width and Height

Edit the width and height values in the example to see how fixed and percentage dimensions affect the size of the boxes.

Be Careful with Fixed Heights

A fixed height can cause problems when an element contains more content than expected. Text can wrap differently on smaller screens, users can increase their text size, and the amount of content can change.

div {
  height: 50px;
}

If the content needs more than 50 pixels of vertical space, it can extend outside the box. In many cases, allowing the height to remain auto gives content enough room to grow naturally.

When a design requires size limits rather than a single fixed size, minimum and maximum sizing properties can provide more flexibility. Those properties are covered later in this section.

Summary

The CSS width and height properties control element dimensions. They can use automatic sizing, fixed or relative length units, and percentages. With the default content-box sizing, declared width and height values apply to the content area while padding and borders increase the size of the border box.

The next tutorial covers Padding and how CSS creates space between an element's content and its border.