Open In App
Related Articles

Which property is used to set the height of a box in CSS ?

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

In this article, we will learn about the property that is responsible to set the height of a box. CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages

Which property is used to set the height of a box?

To set the height of a box height and width properties are used and Its value can be set using length, percentage, or auto.

Properties:

Example 1: In the below code we will make use of the height and width property that is used to define the height and width of an element.

HTML

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

                    

Output:

 

Example 2: In the below code we will make use of the height and width property that is used to define the height and width of an element.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>width and height</title>
    <style>
        .gfg {
            height: 120px;
            width: 60%;
            border: 10px dotted black;
            padding-left: 50px;
            padding-top: 50px;
            font-size: 42px;
            color: green;
            margin-left: 110px;
            margin-top: 50px;
            background-color: lightgreen;
            text-align: center;
        }
 
        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <div class="gfg"></div>
</body>
</html>

                    

Output:

 



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