CSS Height, Width and Max-width
Sure! CSS properties like height, width, and max-width are used to control the dimensions of HTML elements. Here’s a breakdown with examples:
1. height
The height property sets the height of an element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Height Example</title>
<style>
.box {
height: 150px;
width: 150px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example, the .box element will have a fixed height of 150 pixels.
2. width
The width property sets the width of an element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Width Example</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example, the .box element will have a fixed width of 200 pixels.
3. max-width
The max-width property sets the maximum width an element can have. It ensures that the element doesn't exceed this width even if its content would naturally make it wider.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Max-width Example</title>
<style>
.box {
max-width: 300px;
width: 100%;
height: 200px;
background-color: lightgreen;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
This box will never be wider than 300 pixels, even though its width is set to 100% of its container.
</div>
</body>
</html>
In this example, the .box element will adjust its width according to its container (100% width) but will not exceed 300 pixels due to the max-width property.
Summary
heightandwidthset fixed dimensions for elements.max-widthrestricts the maximum width an element can take, allowing for responsive design by constraining the size within specified limits.
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.