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.
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:
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:
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:
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:
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:
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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
20 Jul, 2023
Like Article
Save Article