Height

We will learn about CSS height property in this chapter.

The height property is used to set an element's height.

The height property does not include padding, borders, or margins.

If the min-height and max-height properties are used, it will override the height property.

Negative values are not accepted.

CSS Syntax

height: auto | length | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
           div {
              height:60px;
              background-color:orange;
              color:#ffffff;
           }
           p {
              height:30px;
              background-color:pink;
              color:#ffffff;
            }
     </style>
   </head>
   <body>    
  
         <div>This is some example. Here can be any text.</div>

         <p>This is some paragraph.</p>

   </body>
</html>

Let's see another example:

<!DOCTYPE html>
<html>
   <head>
      <style>
           body{background-color: #42444e;}
            .height-normal {height: auto;}
            .height-big {height: 200px;}
            .height-small {height: 40px;}
     </style>
   </head>
   <body>

         <img class="height-big" src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="146" height="41"><br>

         <img class="height-normal" src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="146" height="41"><br>

        <img class="height-small" src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="146" height="41">

   </body>
</html>

Let's see another example:

<!DOCTYPE html>
<html>
   <head>
       <style>
           body{background-color: #42444e;color:#ffffff;}
            .normal {height: auto;}
            .big {height: 120px;}
            .text{
                   height: 90px;
                   width: 250px;
                 }
      </style>
   </head>
   <body>

         <img class="big" src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="146" height="41">

         <img class="normal" src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="146" height="41">

         <p class="text">We set this paragraph's height to 90px and width 250px.</p>
         <p>You can see the normal paragraph here.You can see the normal paragraph here.You can see the normal paragraph here.You can see the normal paragraph here.</p>

   </body>
</html>

Property Values

Value Descriptions
auto When we use this value, the browser calculates the height. It is the default value of this property.
length It defines the height with px, cm etc.
% It defines the height with percent.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.