Selected Reading
Q&A

CSS - Height & Width (Dimension)

The dimesions of HTML elements is often specified with CSS width and height properties and we can use these properties to set the dimension of the elements.

CSS also provides properties like max-width, min-width, max-height and min-height to set the maximum/minimum width and height of an element.

Setting Height and Width using CSS

The height and width properties allow you to set the height and width of an element. These properties can hold following values:

length: The height and width of an element can be of any unit of length (px, pt, em, in, etc.)
percentage (%): The value can be passed as a percentage value, which is in percent of the containing block.
auto: Browser calculates the height and width of the element. It is the default value.
initial: Sets the value of height and width to its default value.
inherit: The value of height and width is inherited from its parent value.

The height and width properties do not add anything to the layout of the element i.e they do not include padding, margin or borders. They set the height and width of the area inside the padding, border, and margin of the element.

Example

Following example demonstrates using height and width for a div.

<html>
<head>
<style>
   div { 
      height: 100px; width: 80%; background-color: #eee; 
   }
</style>
</head>
<body>
   <h2>Setting Height and Width Properties</h2>
   <div>This div element has a height of 100px and a width of 80%.</div>
</body>
</html>

Setting max-height using CSS

CSS can limit the maximum height of an element using max-height property. This property allows to specify maximum height of an element. The value of the max-height property can be:

none: No maximum height value is set. This is the default value.
length: Sets the maximum height in terms of length units (px, pt, em, in, etc.)
percentage (%): The value is relative to the percent of containing block.
initial: Sets the value of height and width to its default value.
inherit: The value is inherited from its parent value.

Example

Here is an example to set max-height using CSS −

<html>
<head>
<style>
   div.a {
      max-height: 100px; width: 80%; overflow: auto; 
      background-color: #eee; padding:10px;
   }
</style>
</head>
<body>

   <div class="a">
      <h2>max-height: 100px and width:80%</h2>
      <p>The <i>max-height</i> property allows you to specify maximum height of an element. The value of the max-height property can be various, but this div can be maximum 100px high and so it is creating a scrollbar to fit the content.</p>
   </div>
</body>
</html>

Setting min-height using CSS

CSS can limit the minimum height of an element using min-height property. This property allows to specify minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value. The value of the min-height property can be:

length: Sets the minimum height in terms of length units (px, pt, em, in, etc.)
percentage (%): The value is relative to the percent of containing block.
initial: Sets the value of height and width to its default value.
inherit: The value is inherited from its parent value.

The minimum height will be applied, when the content is smaller than the minimum height. And when the content is larger than the mimimum height, the value of min-height has no effect on the element.

Example

Here is an example to set min-height using CSS −

<html>
<head>
<style>
   div.a {
      min-height:200px; width: 80%; overflow: auto; 
      background-color: #eee; padding:10px;
   }
</style>
</head>
<body>

   <div class="a">
      <h2>min-height: 200px and width:80%</h2>
      <p>The <i>min-height</i> property allows you to specify minimum height of an element. The value of the min-height property can be various, but this div can not shrink below to 200px even if you reduce the screen height less than 200px.</p>
   </div>
</body>
</html>

Setting max-width using CSS

CSS can limit the maximum width of an element using max-width property. This property allows to specify maximum width of an element. The value of the max-width property can be:

none: No maximum width value is set. This is the default value.
length: Sets the maximum width in terms of length units (px, pt, em, in, etc.)
percentage (%): The value is relative to the percent of containing block.
initial: Sets the value of height and width to its default value.
inherit: The value is inherited from its parent value.

The max-width value overrides the value of width property. If the content within the element is larger than the specified max-width, it will automatically adjust the height of the element to accommodate the content within the element. If the content within the element is smaller than the specified max-width, the max-width property has no effect.

Example

Here is an example to set max-width using CSS −

<html>
<head>
<style>
   div.a {
      max-width: 600px; overflow: auto; 
      background-color: #eee; padding:10px;
   }
</style>
</head>
<body>

   <div class="a">
      <h2>max-width: 600px </h2>
      <p>The <i>max-width</i> property allows you to specify maximum width of an element. This div can have maxmum width of 600px and if it has larger content than its width then it will adjust the height to fit the content.</p>
   </div>
</body>
</html>

Setting min-width using CSS

CSS can limit the minimum width of an element using min-width property. This property allows to specify minimum width of an element. It specifies the smallest width that an element can have, ensuring that it will never shrink below that value. The value of the min-width property can be:

length: Sets the minimum width in terms of length units (px, pt, em, in, etc.)
percentage (%): The value is relative to the percent of containing block.
initial: Sets the value of height and width to its default value.
inherit: The value is inherited from its parent value.

If the content with the element is larger than the min-width, the min-width property has no effect but if the content with the element is smaller than the specified min-width, the minimum width will be applied.

Example

Here is an example to set min-width using CSS −

<html>
<head>
<style>
   div.a {
      min-width:400px; width: 80%; overflow: auto; 
      background-color: #eee; padding:10px;
   }
</style>
</head>
<body>

   <div class="a">
      <h2>min-width: 400px and width:80%</h2>
      <p>The <i>min-width</i> property allows you to specify minimum width of an element. This div can not shrink below to 400px even if you reduce the screen width less than 400px.</p>
   </div>
</body>
</html>

Setting line-height using CSS

The line-height property allows you to set the space between lines of text. The value of the line-height property can be:

length: The value passed is used in the calculation of line box height (px, pt, em, in, etc.)
percentage (%): The value is relative to the font size of the element.
number: It is a unitless number, that is multiplied by the element's own font-size.
normal: It is a keyword. The default value is 1.2, but it depends on the element's font-family..

Example

Here is an example to set line-height using CSS −

<html>
<head>
<style>
   div.a { 
      line-height: 1.0in; background-color: #eee; margin-bottom: 2px; 
   }
   div.b { 
      line-height: 50px; background-color: #eee; margin-bottom: 2px; 
   }
   div.c { 
      line-height: 5; background-color: #eee; margin-bottom: 5px; 
   }
   div.d { 
      line-height: normal; background-color: #eee; margin-bottom: 2px; 
   }
</style>
</head>
<body>
   <h2>Setting up line-height Property</h2>
   <div class="a">This div element has a line-height of 1.0 inche.</div>
   <div class="b">This div element has a line-height of 50px.</div>
   <div class="c">This div element has a line-height of 5 (unitless number)</div>
   <div class="d">This div element has a line-height of normal.</div>
</body>
</html>