html

Height property in CSS Explained

The height property adjusts the height of an element or one can say it stretches/squeezes the element in the vertical direction. The block elements obtain the height according to the content and if the height needs to be adjusted then height property must be used.

As the height is one of the actions nearest to padding, border, and margins. However, neither it effect them nor gets effect by them. This descriptive guide provides the working and usage of height property in CSS with following learning outcomes:

  • working of the height property in CSS
  • usage of height property in CSS
  • the difference between height and max-height/min-height

How does height property in CSS work

The working of height property in CSS depends on the syntax provided below:

selector {height: value;}

The selector can be any element or may refer to the CSS class in the styling sheet. The value of height can be set in various measuring units stated below;

length: the length(vertical length) can be defined in units such as px, em etc. The px is the static value whereas the em varies according to the default value of the parent element. Like if the body height is set to 20px(as a default height) then it would be equivalent to 1em.

auto: this value adjusts the height according to the browser default setting

percentage(%): the percentage of the main element is taken as reference. For instance, the 50% value would adjust the height to 50%(as per the height of the parent element.)

initial: this uses the default height value

inherit: this value fetches the height from the parent element

The working of the height property in CSS majorly depends on the measuring unit being used.

How to use the height property in CSS

This section provides several examples that demonstrate the functionality of height property in CSS.

Example 1: Using length/percentage of height property

This example uses the length value with various measuring units and the following code is practiced in this regard.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> height property in CSS </title>
</head>
<style type="text/css">
   
    .prim{
        background-color: lightseagreen;
        border-style: solid;
        height: 100px;
    }
    .sec{
        background-color: beige;
        border-style: dotted;
        height: 75%;
    }
    .ter{
        background-color: brown;
        border-style: double;
        height: 10em;
    }
</style>
<body>
    <h3> Adjusting the height(using length and percentage) </h3>
    <p class="prim"> Height is in px </p>
    <p class="sec"> Height is in percentage(%) </p>
    <p class="ter"> Height in em </p>
</body>
</html>

The description of the code is provided below:

  • created three CC classes named “prim”, “sec”, and “ter”
  • the “prim” class considers the height in “px”, whereas the “sec” and “ter” classes make use of “%” and “em” for height length(vertical)
  • the three CSS classes are used in three paragraphs(that are created in the body)

The image of the above code is shown below,

Output:

Example 2: Using auto, inherit and initial values of height property

This example practices the auto, inherit, and initial values of height property in CSS. To do so, the code provided below is practiced

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> height property in CSS </title>
</head>
<style type="text/css">
   
    div{
        border-style: dotted;
        background-color: lightseagreen;
        height: 50px;
        margin-bottom: 25px;
    }
    .ini{
        border-style: solid;
        height: initial;
    }
    .inh{
        border-style: solid;
        height: inherit;

    }
    .aut{
        border-style: double;
        height: auto;
    }
</style>
<body>
    <h3> Adjusting the height </h3>
    <p class="ini"> Height is set to initial value </p>
    <div>  <p class="inh"> Height is being inherited </p> </div>
    <p class="aut"> Height in auto </p>
</body>
</html>

The description of the code is stated below:

  • a CSS for “div” element is created (as it would be used as a parent element)
  • three CSS classes “ini”, “inh”, and “aut” are used that would be used for height values(initial, inherit, and auto)
  • one paragraph uses the “ini” class whereas the paragraph using “inh” class is contained inside a div and the third paragraph makes use of “aut” CSS class

The image of the above code is displayed below

Output:

Example 3: Using height with max-height and min-height

Let’s differentiate the working of height property from max-height/min-height properties using the code written below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> height property in CSS </title>
</head>
<style type="text/css">
    .hx{
        border-style: solid;
        height: 50px;
        max-height: 100px;
    }
    .hn{
        border-style: dashed;
        height: 25px;
        min-height: 75px;
    }
</style>
<body>
    <h3> Adjusting the height </h3>
    <p class="hx"> Height with max-height </p>
    <p class="hn"> Height with min-height </p>
</body>
</html>

The description of the code is

  • two CSS classes are created named “hx” and “hn”
  • the “hx” class contains the “height” and “max-height” properties
  • the “hn” class considers “min-height” and “height” properties
  • the “hx” class is associated with first paragraph whereas the “hn” class is used in second paragraph.

The image of the code is provided below

Output:

It is observed from the output that the max-height property dominated the height property and min-height property dominated the height property.

By going through the examples, we have provided the functionality of height-property and also described its behavior by using it with max/min-height properties.

Conclusion

The height property in CSS adjusts the height (vertical length) of the element. This article provides the working and usage of height property in CSS. The height property is not effected by border/margin/padding but it may be influenced by the max-height and min-height property of CSS. We have provided few examples that use the height with min-height/max-height, and it is concluded that the height property must be used alone(not with max-height/min-height).

About the author

Adnan Shabbir