CSS Height and Width
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;
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"> w3wiki </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>
<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>
<head>
<title>max-width of element</title>
<style>
.GFG {
max-width: 500px;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="GFG">
<h3>w3wiki</h3>
<p>
w3wiki is a computer science
platform where you can learn programming.
It is a Computer Science portal for Beginner.
It contains well written, well thought and
well explained computer science
and programming articles, quizzes etc.
</p>
</div>
</body>
</html>
Output:
2. min-width:
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>w3wiki</h3>
<p>
w3wiki is a computer science platform
where you can learn programming. It is a Computer
Science portal for Beginner. 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
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>w3wiki</h3>
<p>
w3wiki is a computer science platform
where you can learn programming. It is a Computer
Science portal for Beginner. It contains well written,
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>
<div class="GFG">
<h3>w3wiki</h3>
<p>
w3wiki is a computer science platform
where you can learn programming. It is a Computer
Science portal for Beginner. 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:
- Google Chrome
- Mozilla Firefox
- Safari
- Microsoft Edge
- Opera
- Internet Explorer
Contact Us