CSS Dimensions

To set the dimenions of an element, use width and height.

Alternatively, use max-height, min-width, line-height, and others.

Example

#

An element with custom width and height settings.

Custom sized element
<style>
.sizes {
  border: 3px solid #302ea3;
  width: 250px;
  height: 55px;
  padding: 10px;
}
</style>

<div class="sizes">Custom sized element</div>

Element dimensions

The following properties let you control the element's box dimension:

  • height - sets the element height
  • width - sets the element width
  • min-height - sets the minimum height of an element
  • min-width - sets the minimum width of an element
  • max-height - sets the maximum height of an element
  • max-width - sets the maximum width of an element
  • line-height - sets the height of text line

These properties can be set to auto or length values, like px, cm, percentage, etc.

Below is an element with a percentage width. Resize the browser and see that the element adjusts with it.

Height: 100 pixels and width: 80%
<style>
.dimension {
  height: 100px;
  width: 80%;
  border: 3px solid #302ea3;
  padding: 5px;
}
</style>

<div class="dimension">
  Height: 100 pixels and width: 80%
</div>

The min-height property

The min-height property specifies the element's minimum height.

It accepts any valid CSS length value.

An element with min-height:none will have no minimum height.

An element with a minimum height.

Minimum height: 200px
<style>
  .min-height {
    min-height: 200px;
    border: 3px solid #302ea3;
    padding: 15px;
  }
</style>

<div class="min-height"> Minimum height: 200px</div>

For details on min-height, see our CSS min-height Property Reference.


The max-height property

The max-height property specifies the element's maximum height.

It accepts any valid CSS length value.

An element with max-height:none has no maximum height.

An element with a maximum height. The actual height is less than 100px.

Maximum height: 100px
<style>
  .max-height {
    max-height: 100px;
    border: 3px solid #302ea3;
    padding: 15px;
  }
</style>

<div class="max-height"> Maximum height: 100px</div>

For details on max-height, see our CSS max-height Property Reference.


The min-width property

The min-width property specifies the element's minimum width.

It accepts any valid CSS length value.

An element with min-width:none has no minimum width.

An element with a minimum width. The actual width is larger than 300px.

Minimum width: 300px
<style>
  .min-width {
    min-width: 300px;
    border: 3px solid #302ea3;
    padding: 15px;
  }
</style>

<div class="min-width">Minimum width: 300px</div>

For details on min-width, see our CSS min-width Property Reference.


The max-width property

The max-width property specifies the element's maximum width.

It accepts any valid CSS length value.

An element with max-width:none has no maximum width.

An element with a maximum width.

Maximum width: 400px
<style>
  .max-width {
    max-width: 400px;
    border: 3px solid #302ea3;
    padding: 15px;
  }
</style>

<div class="max-width">Maximum width: 400px</div>

For details on max-width, see our CSS max-width Property Reference.


The line-height property

The line-height property sets the spacing between the lines of text.

It accepts these values: auto and any positive or negative length value.

The extra line-height increases the size of the container.

Paul Gauguin was a French Post-Impressionist artist. Unappreciated until after his death, Gauguin is now recognized for his experimental use of color and Synthetist style that were distinct from Impressionism. Toward the end of his life, he spent ten years in French Polynesia. The paintings from this time depict people or landscapes from that region.
<style>
  .line-height {
    border: 3px solid #302ea3;
    padding: 25px;
    line-height: 40px;
  }
</style>

<div class="line-height">
  Paul Gauguin was a French Post-Impressionist
  artist. Unappreciated until after his death,
  Gauguin is now recognized for his experimental
  use of color and Synthetist style that were
  distinct from Impressionism. Toward the end
  of his life, he spent ten years in French
  Polynesia. The paintings from this time
  depict people or landscapes from that region.
</div>

CSS Dimension Properties

All properties that specify an element's dimension.

Property Description
height Sets the height of an element
width Sets the width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
line-height Sets the spacing height between lines of text

You may also like

Guides