CSS Height and Width

    In this CSS tutorial, we will be discussing the width and height properties. To put it simply height and width properties are used to control the height and width of the element content. In the previous tutorials, we have discussed the margin, padding and border properties which also affect the height and width of an element. But the height and width properties do not change or include any of these properties. The height and width property set the area of the element within the padding, border and margin.

    Height and Width property values

    Both height and width accept five types of values

    Values Description
    auto The browser automatically manipulates the height and width of the element.
    length In length, we can use px, cm, etc. units to specify the height and width for an element.
    % It controls the dimension of the element according to the device display.
    initial It set a default value to height/width
    inherit It inherits the height and width value from the parent element.

    < Note >: It is highly recommended to use auto, % and inherit values to set the height and width of an element. < Note >: If an element has padding, margin and border property along with height and width properties. Then the height and width properties mange the element area inside the padding, border and margin. Example

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <style type="text/css">
        
         p{
            border: 2px solid red;
            height: 20%;
            width: 30%;
            }
    
      </style>
    </head>
    <body>
            <p> It's a paragraph, its height and width are 20% and 30% of the display size </p>
    </body>
    </html>

    Preview

    It's a paragraph, its height and width are 20% and 30% of the display size.

    Height and width subsidiary properties

    Both height and width properties have two subsidiary properties min and max, which are used to set the minimum and maximum height and width to an element. As we know that every HTML element represents a rectangular box-like structure and the min and max properties manipulate the height and width of the element box.

    Properties Description
    max-height It set the maximum height for an element in case if its content increase.
    min-height It set a minimum height to an element.
    max-width It set a maximum width to an element.
    min-width It set a minimum width to an element.

    < Note >: These max and min properties help in setting the element content box according to the browser or device display.

    CSS max-height property

    The max-height property set a maximum height value for an element box, and its value must be less than min-height property. < Note >: If the element text content needs more space than the maximum height, then the text will leak from the element border. Example

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <style type="text/css">
        p{
            border: 2px solid red;
            padding: 20px;
            max-height: 25px;
            width: 150px;
            }
      </style>
    </head>
    <body>
            <p> It's a paragraph, with max height 25px and 150px width</p>
    </body>
    </html>

    Preview

    It's a paragraph, its height and width are 20% and 30% of the display size.

    CSS min-height property: The min-height property helps us to set a minimum height to an element. It accepts similar values as height property. Example:

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <style type="text/css">
        p{
            border: 2px solid red;
            padding: 20px;
            min-height: 25px;
            width: 150px;
            }
    
      </style>
    </head>
    <body>
            <p> It's a paragraph, with min height 25px and 150px width</p>
    </body>
    </html>

    Preview

    It's a paragraph, with min height 25px and 150px width

    CSS max-width

    The max-width property set a maximum width to an element. If we use the px or any other fix length value to set the max-width then the text content may leak from the element body. Example

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <style type="text/css">
        p{
            border: 2px solid red;
            padding: 20px;
            height: 25%;
            max-width: 40px;
            }
      </style>
    </head>
    <body>
            <p> It's a paragraph, with height of 25% and 40px max width</p>
    </body>
    </html>

    Preview

    It's a paragraph, with height of 25% and 40px max width

    CSS min-width

    The min-width property set a minimum width to the element. If the component has an only min-width property with not max-width, then the max-width of the element will be adjected according to the display size. Example:

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <style type="text/css">
        p{
            border: 2px solid red;
            padding: 20px;
            height: 25%;
            min-width: 40px;
            }
      </style>
    </head>
    <body>
            <p> It's a paragraph, with height of 25% and 40px min width</p>
    </body>
    </html>

    Preview

    It's a paragraph, with height of 25% and 40px min width

    CSS line-height Property The line-height property is used to control or set the spacing between two lines of the same element. It can only use to increase or decrease the gap between two lines. Example

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <style type="text/css">
    
        p{
             border: 2px solid red;
             padding: 20px;
             height: 50%;
             width: 50%;
             line-height: 40px;
            }
      </style>
    
    </head>
    
    <body>
    
            <p> It's a paragraph, with height of 50%  and 50%  width
                It's a paragraph, with height of 50%  and 50%  width
                It's a paragraph, with height of 50%  and 50%  width
                It's a paragraph, with height of 50%  and 50%  width
            </p>
    </body>
    </html>

    Preview

    It's a paragraph, with height of 50%  and 50%  width            It's a paragraph, with height of 50%  and 50%  width It's a paragraph, with height of 50%  and 50%  width It's a paragraph, with height of 50%  and 50%  width

    Summary

    • The CSS height and width properties define the height and width of element.
    • height and width properties do not include margin, padding and border.
    • If an element has margin, padding and border property, then the height and width properties will work inside it.
    • The max-height, min-height, max-width and min-width are the subsidiary property of height and width properties.
    • The line-height property defines the gap between lines.

    People are also reading: