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 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:
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 geeks. It contains well written,
well thought and well explained computer science
and programming articles, quizzes etc.
</p>
</div>
</body>
</html>
Output:
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.