19/09/2025, 23:25 CSS Height and Width - GeeksforGeeks
Search... Sign In
Full Stack Course HTML CSS JavaScript TypeScript jQuery AngularJS ReactJS Next.js
CSS Height and Width
Last Updated : 23 Jul, 2024
Height and Width in CSS are used to set the height and width of boxes.
Their values can be set using length, percentage, or auto.
Width and Height
The width and height properties in CSS are used to define the
dimensions of an element. The values can be set in various units, such as
pixels (px), centimeters (cm), percentages (%), etc.
Example: This example, demonstrate the usage of CSS Height and
Width.
<!DOCTYPE html>
<html>
<head>
<title>width and height</title>
<style>
.GFG {
height: 120px;
width: 50%;
border: 5px solid black;
https://www.geeksforgeeks.org/css/css-height-and-width/ 1/10
19/09/2025, 23:25 CSS Height and Width - GeeksforGeeks
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:
Height and Width of Image
To set the height and width of an image, the width and height properties
are used. These values can be specified in pixels, percentages, or other
units.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Height and width of image</title>
https://www.geeksforgeeks.org/css/css-height-and-width/ 2/10
19/09/2025, 23:25 CSS Height and Width - GeeksforGeeks
<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:
Set max-width and min-width
1. max-width:
The max-width property is used to set the maximum width of a box. Its
effect can be seen by resizing the browser window.
Example:
<!DOCTYPE html>
<html>
https://www.geeksforgeeks.org/css/css-height-and-width/ 3/10
19/09/2025, 23:25 CSS Height and Width - GeeksforGeeks
<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:
2. min-width:
https://www.geeksforgeeks.org/css/css-height-and-width/ 4/10
19/09/2025, 23:25 CSS Height and Width - GeeksforGeeks
The min-width property is used to set the minimum width of a box. Its
effect can be seen by resizing the browser window.
Example:
<!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 Compute
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:
https://www.geeksforgeeks.org/css/css-height-and-width/ 5/10
19/09/2025, 23:25 CSS Height and Width - GeeksforGeeks
Set max-height and min-height
1. max-height:
The max-height property is used to set the maximum height of a box. Its
effect can be seen by resizing the browser window.
Example:
<!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 Compute
Science portal for geeks. It contains well
written,
https://www.geeksforgeeks.org/css/css-height-and-width/ 6/10
19/09/2025, 23:25 CSS Height and Width - GeeksforGeeks
well thought and well explained computer science
and programming articles, quizzes etc.
</p>
</div>
</body>
</html>
Output:
2. min-height:
The min-height property is used to set the minimum height of a box. Its
effect can be seen by resizing the browser window.
Example:
<!DOCTYPE html>
<html>
<head>
<title>min-height of element</title>
<style>
.GFG {
min-height: 50px;
border: 2px solid black;
}
</style>
</head>
<body>
https://www.geeksforgeeks.org/css/css-height-and-width/ 7/10
19/09/2025, 23:25 CSS Height and Width - GeeksforGeeks
<div class="GFG">
<h3>GeeksforGeeks</h3>
<p>
GeeksforGeeks is a computer science platform
where you can learn programming. It is a Compute
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:
The CSS properties for height and width, including max-width, min-
width, max-height, and min-height, provide flexible ways to control the
dimensions of elements on a webpage. These properties are essential
for creating responsive designs that adapt to different screen sizes and
improve the overall user experience. By mastering these properties,
developers can ensure their web content is both visually appealing and
functional across various devices and browsers.
Supported Browsers
The properties width, height, max-width, min-width, max-height, and
min-height are supported by all major browsers, including:
https://www.geeksforgeeks.org/css/css-height-and-width/ 8/10
19/09/2025, 23:25 CSS Height and Width - GeeksforGeeks
Google Chrome
Mozilla Firefox
Safari
Microsoft Edge
Opera
Comment More info
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate
Tower, Sector- 136, Noida, Uttar Pradesh
(201305)
Registered Address:
K 061, Tower K, Gulshan Vivante
Apartment, Sector 137, Noida, Gautam
Buddh Nagar, Uttar Pradesh, 201305
Company Explore
About Us POTD
Legal Job-A-Thon
Privacy Policy Connect
Careers Community
Contact Us Blogs
Corporate Solution Nation Skill Up
Campus Training Program
Tutorials Courses
Programming Languages IBM Certification
DSA DSA and Placements
Web Technology Web Development
AI, ML & Data Science Data Science
DevOps Programming Languages
CS Core Subjects DevOps & Cloud
Interview Preparation GATE
GATE Trending Technologies
https://www.geeksforgeeks.org/css/css-height-and-width/ 9/10
19/09/2025, 23:25 CSS Height and Width - GeeksforGeeks
School Subjects
Software and Tools
Offline Centers Preparation Corner
Noida Aptitude
Bengaluru Puzzles
Pune GfG 160
Hyderabad DSA 360
Patna System Design
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
https://www.geeksforgeeks.org/css/css-height-and-width/ 10/10
