📏 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

Property	Description
width	Horizontal size
height	Vertical size
min-width / min-height	Minimum size limit
max-width / max-height	Maximum size limit

🎯 CSS Unit Types

Below is the proper table format you want ⬇️

📐 CSS Size Units Summary

Unit	Example	Description
px	width: 200px	Fixed pixel size (not responsive)
%	width: 50%	Relative to parent element
vw	width: 100vw	1vw = 1% of viewport width
vh	height: 100vh	1vh = 1% of viewport height
rem	font-size: 2rem	Relative to root (HTML) font-size (default 16px)
em	font-size: 2em	Relative to parent element’s font-size
ch	width: 20ch	Width of ~20 characters (0 width of "0")
ex	height: 2ex	Height relative to lowercase “x”
vmin	width: 50vmin	1% of smaller viewport dimension
vmax	height: 50vmax	1% of larger viewport dimension
auto	width: auto	Automatically adjusts based on content
fit-content	width: fit-content	Adjusts size based on content limits

📝 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;
}

Use Case	Best Unit	Description
Text	rem	Best for typography, scales with root font-size
Component spacing	rem / em	Consistent spacing that adapts to font-size
Fluid layouts	%	Adapts to parent container size
Fullscreen sections	vh / vw	Matches viewport height/width
Buttons / Chips	fit-content	Shrinks or expands exactly to content size
Minimal responsive blocks	clamp()	Sets min, ideal, and max size for smooth responsiveness

← Previous Next →