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.
At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.
Terms Disclaimer About Us Contact Us
Copyright 2023-2025 © All rights reserved.