CSS Height and Width
What are CSS Height and Width?
CSS Height and Width properties are used to control the size of HTML elements. The width property controls how wide an element is, while the height property controls how tall an element is. These properties are commonly used for creating layouts, images, containers, cards, and responsive designs.
Why Use CSS Height and Width?
Height and Width allow developers to control the size and appearance of webpage elements. They help create organized layouts, maintain consistent designs, control images and sections, and make websites responsive on different devices.
Basic Width and Height Syntax
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:300px;
height:150px;
background:#007BFF;
color:white;
}
</style>
</head>
<body>
<div class="box">
Width and Height Example
</div>
</body>
</html>Step 1: Set Element Width
The width property defines the horizontal size of an element. You can use values like pixels (px), percentages (%), rem, em, and viewport units.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:400px;
background:#28a745;
color:white;
padding:20px;
}
</style>
</head>
<body>
<div class="box">
This box has 400px width
</div>
</body>
</html>Step 2: Set Element Height
The height property defines the vertical size of an element. It controls how much space an element occupies from top to bottom.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:250px;
height:200px;
background:#ff9800;
color:white;
display:flex;
align-items:center;
justify-content:center;
}
</style>
</head>
<body>
<div class="box">
Height Example
</div>
</body>
</html>Step 3: Using Percentage Width and Height
Percentage values make elements flexible according to their parent container. They are useful for creating responsive layouts.
<!DOCTYPE html>
<html>
<head>
<style>
.container{
width:80%;
height:200px;
background:#ddd;
}
.box{
width:50%;
height:50%;
background:#6f42c1;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
50% Width and Height
</div>
</div>
</body>
</html>Step 4: Maximum and Minimum Height/Width
CSS provides min-width, max-width, min-height, and max-height properties to control the limits of an element size.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:100%;
max-width:400px;
min-height:150px;
background:#17a2b8;
color:white;
padding:20px;
}
</style>
</head>
<body>
<div class="box">
Maximum Width Example
</div>
</body>
</html>Responsive Width Example
For responsive websites, developers usually combine percentage widths with max-width so elements can adjust according to the screen size.
<!DOCTYPE html>
<html>
<head>
<style>
.image-box{
width:100%;
max-width:500px;
}
.image-box img{
width:100%;
height:auto;
}
</style>
</head>
<body>
<div class="image-box">
<img src="https://picsum.photos/500/300"
alt="Responsive Image">
</div>
</body>
</html>Complete CSS Height and Width Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:Arial;
background:#f5f9ff;
}
.container{
width:90%;
max-width:600px;
height:auto;
margin:auto;
background:white;
padding:30px;
border:2px solid #007BFF;
}
.box{
width:100%;
height:150px;
background:#007BFF;
color:white;
display:flex;
justify-content:center;
align-items:center;
font-size:22px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
Responsive Box
</div>
</div>
</body>
</html>Advantages of CSS Height and Width
Common Mistakes
Beginners often forget CSS units, use fixed sizes everywhere, set very large heights, or create layouts that do not adjust on mobile devices.
<style>
/* Incorrect */
.box{
width:300;
height:200;
}
/* Correct */
.box{
width:300px;
height:200px;
}
</style>Best Practices
- Use responsive units like %, rem, and vw when possible.
- Use max-width to prevent content from becoming too wide.
- Use height:auto for responsive images.
- Avoid fixed heights for content that can change.
- Use min-width and max-width for flexible layouts.
- Test designs on mobile, tablet, and desktop screens.
- Use CSS Flexbox or Grid with height and width properties.
- Keep element sizes consistent throughout your design.
Web Resources on CSS Height and Width
1. MDN Web Docs : height CSS property
2. MDN Web Docs : width CSS property
3. CSS Tricks.com : Exploring the Complexities of Width and Height in CSS
4. Dev.to : Difference between height, min-height, max-height, width, min-width, max-width
🧪 Test Your CSS Code
Edit the CSS code on the left and click “Run Code” to see the result on the right.
Click “Run Code” to see the result here.