CSS Height and Width

The height and width properties are used to set the height and width of an element.

You can set the following values for both property:

  • auto 
  • length 
  • initial 
  • inherit
div {
  border: 1px #333 solid;
  height: 20px;
  width: 50%;
}
Width & Height

Max and Min Width and Height

Oftentimes, we want to limit the width of an element relative to its parent, and at the same time, to make it dynamic. So having a base width or height with the ability to make it extend based on the available space. Let’s say, for example, that we have a button that should have a minimum width, where it shouldn’t go below it. This is where the maximum and minimum properties become handy.

div {
    width: 100px;
    min-width: 50%;
    max-width: 100%;
}
div {
    height: 100px;
    min-height: 80%;
    max-height: 75%;
}