📏 CSS Size Properties (Width, Height & Units)
Last Updated: November 2025
CSS size properties define how big an element appears — its width, height, and limits like min-width or max-height.
🗣 Hinglish Tip: Yeh decide karta hai element kitna bada/ chhota dikhega — fixed ho ya responsive.
Size Properties
CSS Unit Types
Below is the proper table format you want ⬇️
📐 CSS Size Units Summary
📝 Examples of Each Unit
.box {
width: 200px;
height: 80px;
background: lightblue;
}
.child {
width: 50%;
height: 100px;
background: coral;
}
html {
font-size: 16px; /* 1rem = 16px */
}
.parent {
font-size: 20px; /* 1em = 20px in this element */
}
.child {
font-size: 2rem; /* = 32px */
width: 10em; /* = 200px because parent font-size is 20px */
}
.hero {
width: 100vw;
height: 100vh;
background: lightgreen;
}
.card {
width: fit-content;
padding: 10px;
background: #ffeaa7;
}
