The CSS height and width properties are used to define the size of an element. They help control how much space an element occupies on a webpage, ensuring proper layout and design consistency. These properties can be set using units like pixels, percentages, or viewport values to create responsive web designs.
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.
html
<!DOCTYPE html>
<html>
<head>
<title>width and height</title>
<style>
.GFG {
width: 40%;
border: 3px solid black;
font-size: 22px;
font-weight: bold;
color: green;
text-align: center;
padding: 20px;
margin: 20px 0 0 10px;
}
</style>
</head>
<body>
<div class="GFG"> GeeksforGeeks </div>
</body>
</html>
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.
html
<!DOCTYPE html>
<html>
<head>
<title>Height and width of image</title>
<style>
.GFG {
width: 100px;
height: 50px;
border: 2px solid black;
}
</style>
</head>
<body>
<h3>Set the width and height of an Image</h3>
<img class="GFG" src="https://media.geeksforgeeks.org/wp-content/uploads/20210224031038/Capture4-300x174.PNG">
</body>
</html>
Set max-width and min-width
These properties control the maximum and minimum width an element can have.
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.
html
<!DOCTYPE html>
<html>
<head>
<title>max-width of element</title>
<style>
.GFG {
max-width: 500px;
font-size:12px;
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>
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.
html
<!DOCTYPE html>
<html>
<head>
<title>min-width of element</title>
<style>
.GFG {
min-width: 400px;
font-size:13px;
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>
Set max-height and min-height
These properties define the maximum and minimum height an element can take.
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.
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>
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.
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>
- Height and width properties define the basic dimensions of elements on a webpage.
- max-width and min-width control the maximum and minimum allowable widths of an element.
- max-height and min-height control the maximum and minimum allowable heights of an element.
- These properties enable flexible and responsive layouts that adapt to different screen sizes.
- They help maintain visual consistency and improve user experience across devices.