POPULAR
Instant Online HTML Formatter
NEW TOOL
Try our Interactive Python Online Playground!
FEATURED
HTML, CSS & JS Live Code Playground
POPULAR
Try Our Online Code Editor and Compiler
POPULAR
Instant Online HTML Formatter
NEW TOOL
Try our Interactive Python Online Playground!
FEATURED
HTML, CSS & JS Live Code Playground
POPULAR
Try Our Online Code Editor and Compiler
CSS Units
CSS units define how sizes, spacing, and dimensions are measured in a webpage. Every value related to width, height, margin, padding, font size, positioning, and layout depends on CSS units. Without a clear understanding of CSS units, it becomes very difficult to build responsive, consistent, and scalable designs.
In this chapter, you will learn what CSS units are, why they matter, the different types of CSS units, how they behave, and when to use each one in real-world layouts.
What Are CSS Units
CSS units are measurement values used to define the size of elements and text on a webpage. They tell the browser how big or small something should appear.
Example:
p {
font-size: 16px;
}
Here, px is a CSS unit that defines the size of the text.
CSS units can be divided into two main categories:
-
Absolute units
-
Relative units
Each category serves a different purpose in layout and design.
Why CSS Units Are Important
Choosing the right CSS unit directly affects how your website looks across different screen sizes and devices.
CSS units help you:
-
Control spacing and layout precisely
-
Create responsive designs
-
Improve accessibility
-
Maintain consistency across pages
-
Adapt designs for mobile, tablet, and desktop
Poor unit choices often lead to layouts that break on small screens or look inconsistent on large displays.
Types of CSS Units
CSS provides many units, but they can be grouped logically to make them easier to understand.
The two main types are:
-
Absolute units
-
Relative units
Let’s explore each in detail.
What Are Absolute CSS Units
Absolute units have fixed values. They do not change based on screen size, parent elements, or user settings.
Common absolute units include:
-
px
-
cm
-
mm
-
in
-
pt
-
pc
Among these, px is the most commonly used in web design.
What Is px Unit in CSS
The px unit represents a pixel on the screen. It is widely used because it provides precise control.
Example:
div {
width: 300px;
height: 150px;
}
This element will always be exactly 300 pixels wide and 150 pixels tall.
Advantages of px
-
Easy to understand
-
Precise control
-
Predictable layout
Disadvantages of px
-
Not responsive by default
-
Does not scale well with user font settings
-
Can cause accessibility issues
Because of these limitations, px should be used carefully, especially for font sizes.
Other Absolute Units
Units like cm, mm, in, pt, and pc are based on physical measurements. They are rarely used in web design because screen sizes and resolutions vary greatly.
Example:
p {
font-size: 12pt;
}
These units are more useful for print stylesheets than for screen layouts.
What Are Relative CSS Units
Relative units are flexible. Their values depend on another measurement such as font size, viewport size, or parent element size.
Relative units are preferred for responsive and modern web design.
Common relative units include:
-
em
-
rem
-
%
-
vw
-
vh
-
vmin
-
vmax
Each of these units behaves differently.
What Is em Unit
The em unit is relative to the font size of the parent element.
Example:
div {
font-size: 16px;
}
p {
font-size: 1.5em;
}
The paragraph text will be 24px because 1.5em equals 1.5 times the parent font size.
Where em Is Useful
-
Padding and margin relative to text
-
Scalable components
-
Nested elements
Common Problem with em
em values compound when elements are nested, which can cause unexpected results if not handled carefully.
What Is rem Unit
The rem unit is relative to the root element’s font size, usually the html element.
Example:
html {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
The heading will be 32px regardless of nesting.
Why rem Is Preferred
-
Predictable behavior
-
Easier to manage
-
Better for accessibility
-
Ideal for font sizes
Most modern CSS frameworks use rem extensively.
What Is Percentage Unit
The % unit is relative to the size of the parent element.
Example:
div {
width: 50%;
}
The element will take half the width of its parent.
Where Percentage Units Are Used
-
Fluid layouts
-
Responsive containers
-
Flexible widths
Percentages are powerful but depend heavily on the parent element’s size.
What Are Viewport Units
Viewport units are based on the size of the browser window.
Common viewport units include:
-
vw
-
vh
-
vmin
-
vmax
These units help create layouts that adapt directly to screen size.
What Is vw Unit
vw stands for viewport width.
1vw equals 1 percent of the viewport width.
Example:
div {
width: 50vw;
}
The element will be half the width of the browser window.
What Is vh Unit
vh stands for viewport height.
1vh equals 1 percent of the viewport height.
Example:
section {
height: 100vh;
}
This makes the section fill the entire screen height.
What Are vmin and vmax
-
vminuses the smaller value of viewport width or height -
vmaxuses the larger value
These units are useful for responsive typography and scaling elements proportionally.
CSS Units for Font Sizes
Choosing the right unit for font size is critical.
Recommended practices:
-
Use
remfor base typography -
Avoid fixed
pxfor body text -
Use
emfor component-level scaling
Example:
body {
font-size: 1rem;
}
h1 {
font-size: 2.5rem;
}
This approach scales well across devices and user preferences.
CSS Units for Layout
Different layout situations require different units.
Common patterns:
-
Use
%for flexible containers -
Use
vwandvhfor full-screen sections -
Use
remfor spacing consistency -
Use
pxfor small, fixed elements
Combining units intelligently creates strong layouts.
Mixing CSS Units
It is normal and often recommended to mix CSS units.
Example:
.card {
width: 90%;
max-width: 400px;
padding: 1.5rem;
}
This provides flexibility while maintaining limits.
Accessibility and CSS Units
Relative units improve accessibility.
Users who increase font size in browser settings benefit when rem and em are used.
Avoid locking text sizes using fixed px values whenever possible.
Common Mistakes with CSS Units
Some frequent errors include:
-
Using only px everywhere
-
Ignoring parent size when using %
-
Overusing viewport units for text
-
Not testing across screen sizes
Understanding how units behave prevents these issues.
Best Practices for Using CSS Units
Follow these best practices for clean and scalable CSS:
-
Use
remfor font sizes -
Use
%for flexible widths -
Use
vwandvhfor full-screen layouts -
Avoid unnecessary absolute units
-
Test designs on multiple devices
These habits lead to better responsive design.
Summary of CSS Units
CSS units are the foundation of layout, spacing, and typography in web design. Absolute units like px provide precision, while relative units like rem, em, %, and viewport units enable responsive and accessible layouts. Understanding how each unit works and when to use it helps you build flexible, user-friendly, and modern websites. Mastering CSS units is a key step toward writing professional and maintainable CSS.
⚡ Want to test or run code snippets from this lesson?
Use CodePractice Universal Try-It Editor to run HTML, CSS, JS, Python, C, C++, Java & MySQL live in your browser!
Launch Free Live Code EditorPractice Questions
Q1. Set a div width to 500 pixels.
Q2. Set font size to 2em inside a div.
Q3. Make a section full height of the screen using vh.
Q4. Set padding as 10% of the parent width.
Q5. Make a container 60 characters wide using ch.
Q6. Use rem to define font size of 24px (assuming root is 16px).
Q7. Set image width to 80% of its parent.
Q8. Create a box that is 5cm wide and 2in tall.
Q9. Use vmin to adjust font-size for small screens.
Q10. Create two divs with widths 60vw and 40vw side by side.
