CSS - Dimension

Previous
Next

In the earlier chapters we learnt how to add padding, margin, border, etc using CSS to an element. Now we will see how to set dimensions to an element. Here we will study how to set conditions to limit how high or wide a positioned element gets, not to mention cases where you want the browser to go ahead and automatically calculate the width, height, or both.

Following properties allow you to control the dimensions of an element:

  • height: Sets the height of an element.

  • width: Sets the width an element.

  • line-height: Sets the height of a line of text.

  • max-height: Sets a maximum height that an element can have.

  • min-height: Sets the minimum height that an element can have.

  • max-width: Sets the maximum width that an element can have.

  • min-width: Sets the minimum width that an element can have.

Height And Width

The height and width properties allow you to set specific height and width for your positioned element.

These properties can hold following values:

  • length: Any unit of length (px, pt, em, in, etc.)

  • percentage (%): A percentage value, which is in percent of the containing block.

  • auto: Browser calculates the height and width of the element. Default value.

  • initial: Sets the value of height and width to its default value.

  • inherit: Inherits the value of height and width from its parent value.

Following example demonstrates using height and width for a div element:

<html>
<head>
<style>
   div {
      height: 100px;
      width: 80%;
      background-color: rgb(206, 211, 225);
   }
</style>
</head>
<body>
   <h2>Height and Width Property without layout properties</h2>
   <div>This div element has a height of 100px and a width of 80%.</div>
</body>
</html>
The height and width properties in this example add nothing to the layout of the element i.e it doesn't include padding, margin or border.

Following example demonstrates the difference when using height and width for a div along with padding, a border, or a margin:

<html>
<head>
<style>
   div {
      height: 100px;
      width: 80%;
      padding: 2em;
      border:1px solid;
      margin:2px;
      background-color: rgb(206, 211, 225);
   }
</style>
</head>
<body>
   <h2>Height and Width Property with padding, margin, border</h2>
   <div>This div element has a height of 100px and a width of 80%.</div>
</body>
</html>

CSS Dimension - Line Height

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

  • length: Any unit length, used in the calculation of line box height (px, pt, em, in, etc.)

  • percentage (%): Value relative to the font size of the element.

  • number: A unitless number, that is multiplied by the element's own font-size.

  • normal: A keyword. The default value is 1.2, but it depends on the element's font-family.

Example

Here is an example:

<html>
<head>
<style>
   div.a {
      line-height: 2in;
      font-size: 10pt;
      background-color: rgb(206, 211, 225);
      margin-bottom: 2px;
      }
   div.b {
      line-height: 100px;
      font-size: 10pt;
      background-color: rgb(206, 211, 225);
      margin-bottom: 2px;
      }
   div.c {
      line-height: 5;
      font-size: 10pt;
      background-color: rgb(206, 211, 225);
      margin-bottom: 5px;
      }
   div.d {
      line-height: normal;
      font-size: 10pt;
      background-color: rgb(206, 211, 225);
      margin-bottom: 2px;
      }
</style>
</head>
<body>
   <h2>line-height Property</h2>
   <div class="a">This div element has a line-height of 2 inches.</div>
   <div class="b">This div element has a line-height of 100px.</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>

CSS Dimension - Maximum Height

An element’s height can be limited using max-height property. This allows you to specify maximum height of an element. The value of the max-height property can be:

  • none: No maximum height value is set. Default value.

  • length: Sets the maximum height in terms of length units (px, pt, em, in, etc.)

  • percentage (%): Value relative to the percent of containing block.

  • initial: Sets the value of max-height to its default value.

  • inherit: Inherits the value of max-height from its parent.

Example

Here is an example:

<html>
<head>
<style>
   div {
      width: 60%;
      overflow: auto;
      border: 2px solid black;
      padding-bottom: 2px;
      }   
   div.a {
      max-height: 100px;
      }
   div.b {
      max-height: 70%;
      }
   div.c {
      max-height: inherit;
      }
   div.d {
      max-height: none;
      }
</style>
</head>
<body>
   <div class="a">
      <h2>max-height: 100px and width:80%</h2>
         <p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is 100px.</p>
   </div>
   <div class="b">
      <h2>max-height: 70% and width:80%</h2>
         <p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is 70%.</p>
   </div>
   <div class="c">
      <h2>max-height: inherit and width:80%</h2>
         <p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is inherit.</p>
   </div>
   <div class="d">
      <h2>max-height: none and width:80%</h2>
         <p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is none.</p>
   </div>
</body>
</html>

CSS Dimension - Minimum Height

The min-height property in CSS is used to set the 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.). Default value.

  • percentage (%): Value is relative to the percent of containing block.

  • initial: Sets the value of min-height to its default value.

  • inherit: Inherits the value of min-height from its parent.

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:

<html>
<head>
<style>
   div.a {
      border: 2px solid red;
      min-height: 200px;
      width: 80%;
      overflow: auto;
      margin-bottom:2px;
      }
   div.b {
      border: 2px solid blue;
      min-height: 40%;
      overflow: auto;
      margin-bottom:2px;
      }
   div.c {
      border: 2px solid green;
      min-height: 20px;
      overflow: auto;
      margin-bottom:2px;
      }
</style>
</head>
<body>
   <div style="border:2px dashed black; margin-bottom:4px;">
      <h2>min-height: 0 (default):</h2>
         <p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p>
   </div>
   <div class="a">
      <h2>min-height: 200px and width:80%</h2>
         <p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p>
   </div>
   <div class="b">
      <h2>min-height: 40%</h2>
         <p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p>
   </div>
   <div class="c">
      <h2>min-height: 20px (smaller than content)</h2>
         <p>The min-height is smaller than the content, hence the property <i>min-height</i> has no effect.
            The <i>min-height</i> property in CSS is used to set the minimum height of an element.
            It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.
         </p>
   </div>
</body>
</html>

CSS Dimension - Miximum Width

The max-width property allows you to specify maximum width of an element. The value of the max-width property can be:

  • none: No maximum width value is set. Default value.

  • length: Sets the maximum width in terms of length units (px, pt, em, in, etc.).

  • percentage (%): Sets the maximum width in the percent of containing block.

  • initial: Sets the value of max-width to its default value.

  • inherit: Inherits the value of max-width from its parent.

If the content within the element is larger than the specified max-width, it will automatically change the height of the element.

If the content within the element is smaller than the mspecified max-width, the max-width property has no effect.

The max-width value overrides the value of width property.

Example

Here is an example:

<html>
<head>
<style>
   div.a {
      border: 2px solid red;
      max-width: 200px;
      width: 400px;
      overflow: auto;
      margin-bottom: 4px;
      }
   div.b {
      border: 2px solid blue;
      max-width: 40%;
      overflow: auto;
      margin-bottom: 4px;
      }
   div.c {
      border: 2px solid red;
      max-width: none;
      width: 400px;
      overflow: auto;
      margin-bottom: 4px;
      }
</style>
</head>
<body>
   <div class="a">
      <h2>max-width: 200px and width:400px</h2>
         <p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is 200px less than the width which is 400px.</p>
   </div>
   <div class="b">
      <h2>max-width: 40%</h2>
         <p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is 40%.</p>
   </div>
   <div class="c">
      <h2>max-width: none (default):</h2>
         <p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is none.</p>
   </div>
</body>
</html>

CSS Dimension - Minimum Width

The min-width property allows you to specify minimum width of an element. The value of the min-width property can be:

  • length: Sets the minimum width in terms of length units (px, pt, em, in, etc.). Default value is 0.

  • percentage (%): Sets the minimum width in the percent of containing block.

  • initial: Sets the value of min-width to its default value.

  • inherit: Inherits the value of min-width from its parent.

If the content with the element is smaller than the specified min-width, the minimum width will be applied.

If the content with the element is larger than themin-width, the min-width property has no effect. This prevents the value of the width property from becoming smaller than min-width.

Example

Here is an example −

<html>
<head>
<style>
   .box1 {
      min-width: 300px;
      background-color: yellow;
      padding: 20px;
      margin-bottom: 5px;
   }
   .box2 {
      min-width: 30%;
      background-color: lightgrey;
      padding: 20px;
      display: inline-block;
      margin-bottom: 5px;
   }
</style>
</head>
<body>
   <div class="box1">This box has a minimum width of 300px</div>
   <div class="box2">This box has a minimum width of 30%.</div>
   <div class="box2">
      This box has a minimum width of 30%. But the content is larger than the min-width.
      Hence the value of min-width has no effect. This is a dimensional property which can styled using CSS.
   </div>
</body>
</html>

CSS Dimension - Related Properties

All the properties related to dimensions are listed in the table below:

Property Description
height Sets the height of an element.
width Sets the width of an element
line-height Sets the line-height of an element
max-height Sets the maximum height of an element
min-height Sets the mimimum height of an element.
max-width Sets maximum width of an element.
min-width Sets minimum width an element.
Print Page
Previous
Next
Advertisements