CSS Height and Width Properties

CSS includes height and width properties to help you specify the size of your elements.

`height` and `width` Properties

Applies to all HTML elements except non-replaced inline elements, table columns and column groups.

You can use a fixed height (i.e. pixels) or a percentage height. For more info, see height and width.

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    height: 150px;
    width: 75px;
    background-color: gold;
  }
</style>

<div>
  This div has height and width applied.
</div>

`max-height` and `max-width` Properties

Enables you to constrain the height and/or width of an element to a maximum value. For more information, see max-height and max-width.

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    max-height: 150px;
    max-width: 75px;
    background-color: gold;
  }
</style>

<div>
  This div has 'max-height' and 'max-width' applied.
</div>

`min-height` and `min-width` Properties

Enables you to constrain the height and/or width of an element to a minimum value. For more info, see min-height and min-width

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    min-height: 150px;
    min-width: 75px;
    background-color: gold;
  }
</style>

<div>
  This div has 'min-height' and 'min-width' applied.
</div>

Note that height and width can be affected by borders and padding. We cover this later in the tutorial, and show you how you can deal with this issue.

CSS Height and Width Properties

height and width Properties

max-height and max-width Properties

min-height and min-width Properties

`height` and `width` Properties

`max-height` and `max-width` Properties

`min-height` and `min-width` Properties