Open In App

CSS Height and Width

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Height and Width in CSS are used to set the height and width of boxes. Its value can be set using length, percentage, or auto.

Width and height

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>width and height</title>
    <style>
        .GFG {
            height: 120px;
            width: 50%;
            border: 5px solid black;
            padding-left: 50px;
            padding-top: 50px;
            font-size: 42px;
            font-weight: bold;
            color: green;
            margin-left: 50px;
            margin-top: 50px;
        }
    </style>
</head>
 
<body>
    <div class="GFG"> GeeksforGeeks </div>
</body>
 
</html>


Output:

width and height

Height and width of Image: It is used to set the height and width of an image. It’s value can be in px, cm, percent, … etc. 

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Height and width of image</title>
    <style>
        .GFG {
            width: 300px;
            height: 200px;
            border: 3px solid black;
        }
    </style>
</head>
 
<body>
    <h3>Set the width and height of an Image</h3>
    <img class="GFG" src="4.jpg">
</body>
 
</html>


Output:

Height and width of an image

Set max-width and min-width of an element: 

max-width: It is used to set the maximum width of the box. Its effect can be seen by resizing the browsers. 

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>max-width of element</title>
    <style>
        .GFG {
            max-width: 500px;
            border: 2px solid black;
        }
    </style>
</head>
 
<body>
    <div class="GFG">
        <h3>GeeksforGeeks</h3>
        <p>
              GeeksforGeeks is a computer science
            platform where you can learn programming.
            It is a Computer Science portal for geeks.
            It contains well written, well thought and
            well explained computer science
            and programming articles, quizzes etc.
        </p>
   </div>
</body>
 
</html>


Output:

max-width

min-width: It is used to set the minimum width of the box. Its effect can be seen by resizing the browsers. 

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>min-width of element</title>
    <style>
        .GFG {
            min-width: 400px;
            border: 2px solid black;
        }
    </style>
</head>
 
<body>
    <div class="GFG">
        <h3>GeeksforGeeks</h3>
        <p>
              GeeksforGeeks is a computer science platform
            where you can learn programming. It is a Computer
            Science portal for geeks. It contains well written,
            well thought and well explained computer science
            and programming articles, quizzes etc.
        </p>
    </div>
</body>
 
</html>


Output:

min-width

Set max-height and min-height of an element: 

max-height: It is used to set the maximum height of the box. It’s effect can be seen by resizing the browsers. 

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>max-height of element</title>
    <style>
        .GFG {
            max-height: 100px;
            border: 2px solid black;
        }
    </style>
</head>
 
<body>
    <div class="GFG">
        <h3>GeeksforGeeks</h3>
        <p>
              GeeksforGeeks is a computer science platform
            where you can learn programming. It is a Computer
            Science portal for geeks. It contains well written,
            well thought and well explained computer science
            and programming articles, quizzes etc.
        </p>
    </div>
</body>
 
</html>


Output:

max-height

min-height: It is used to set the minimum height of the box. It’s effect can be seen by resizing the browsers. 

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>min-height of element</title>
    <style>
        .GFG {
            min-height: 50px;
            border: 2px solid black;
        }
    </style>
</head>
 
<body>
    <div class="GFG">
        <h3>GeeksforGeeks</h3>
        <p>
              GeeksforGeeks is a computer science platform
            where you can learn programming. It is a Computer
            Science portal for geeks. It contains well written,
            well thought and well explained computer science
            and programming articles, quizzes etc.
        </p>
    </div>
</body>
 
</html>


Output: 

min-height



Last Updated : 20 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads