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

Last Updated : 01 Jun, 2023

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:

height property: This property is used to create the height of the box.
width property: This property is used to create a width of the box.

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>