CSS Height and Width

The height and width properties are used to control the dimensions of an element, specifying how tall (height) and wide (width) it should be rendered on the webpage.
These properties are crucial for controlling the layout and sizing of HTML elements. we can declare the value of Height and Margin in may ways. Negative values are also accepted
These formats are applicable to many styles.

Example 

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Height and width examples</title>
        <style>
            p {
                background-color: black;
                color: white;
            }
            .s1 {
                height: 200px;
                width: 100px;
            }
            .s2 {
                height: 40%;
                width: 40%;
            }
            .s3 {
                height: 30vh;
                width: 30vw;
            }
        </style>
    </head>
    <body>
        <p class="s1">This box has a width and height specified in pixels.</p>
        <p class="s2">This box has a width and height specified in perceentage.</p>
        <p class="s3">This box has a width and height specified in viewport.</p>
    </body>
</html>
Run

Auto Sizing

By default, most elements will automatically adjust their width to fit the content within them (width: auto).
Similarly, elements like block-level divs will expand vertically to fit their content (height: auto).
However, you can still use height: auto and width: auto explicitly if needed.

Example 

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Height and width examples</title>
        <style>
            p {
                background-color: black;
                color: white;
            }
            .s1 {
                height: 200px;
                width: 100px;
            }
            .s2 {
                height: 40%;
                width: 40%;
            }
            .s3 {
                height: 30vh;
                width: 30vw;
            }
        </style>
    </head>
    <body>
        <p class="s1">This box has a width and height specified in pixels.</p>
        <p class="s2">This box has a width and height specified in perceentage.</p>
        <p class="s3">This box has a width and height specified in viewport.</p>
    </body>
</html>
Run

Min and Max Dimensions

You can set minimum and maximum dimensions for an element using the properties.
  1. min-width
  2. max-width
  3. min-height
  4. max-height

Example 

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Height and width examples</title>
        <style>
            p {
                background-color: black;
                color: white;
            }
            .resizable-element {
                min-width: 100px;
                max-width: 300px;
                min-height: 50px;
                max-height: 200px;
            }
        </style>
    </head>
    <body>
        <p class="resizable-element">This box has a min and max for width and height</p>
    </body>
</html>
Run

Quick Recap - Topics Covered

CSS Height and Width
Auto Sizing
Min and Max Dimensions

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

Example js

Example 1 Example 2 Example 3 Example 4 Example 5

Quiz

FEEDBACK