Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!
One of the things you’ll use every day in CSS are units. They are used to set lengths, paddings, margins, align elements and so on.
Things like px
, em
, rem
, or percentages.
They are everywhere. There are some relatively unknown ones, too.
Pixels
The most widely used measurement unit. A pixel does not actually correlate to a physical pixel on your screen, as that varies, a lot, by device (think high-DPI devices vs non-retina devices).
There is a convention that make this unit work consistently across devices.
Percentages
Another very useful measure, percentages let you specify values in percentages of that parent element’s corresponding property.
Example:
.parent {
width: 400px;
}
.child {
width: 50%; /* = 200px */
}
Real-world measurement units
We have those measurement units which are translated from the outside world. Mostly useless on screen, they can be useful for print stylesheets. They are:
cm
a centimeter (maps to 37.8 pixels)mm
a millimeter (0.1cm)q
a quarter of a millimeterin
an inch (maps to 96 pixels)pt
a point (1 inch = 72 points)pc
a pica (1 pica = 12 points)
Relative units
em
is the value assigned to that element’sfont-size
, therefore its exact value changes between elements. It does not change depending on the font used, just on the font size. In typography this measures the width of them
letter.rem
is similar toem
, but instead of varying on the current element font size, it uses the root element (html
) font size. You set that font size once, andrem
will be a consistent measure across all the page.ex
is likeem
, but inserted of measuring the width ofm
, it measures the height of thex
letter. It can change depending on the font used, and on the font size.ch
is likeex
but instead of measuring the height ofx
it measures the width of0
(zero).
Viewport units
vw
the viewport width unit represents a percentage of the viewport width.50vw
means 50% of the viewport width.vh
the viewport height unit represents a percentage of the viewport height.50vh
means 50% of the viewport height.vmin
the viewport minimum unit represents the minimum between the height or width in terms of percentage.30vmin
is the 30% of the current width or height, depending which one is smallervmax
the viewport maximum unit represents the maximum between the height or width in terms of percentage.30vmax
is the 30% of the current width or height, depending which one is bigger
Fraction units
fr
are fraction units, and they are used in CSS Grid to divide space into fractions.
Download my free CSS Handbook
The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!
More css tutorials:
- The Flexbox Guide
- CSS Grid Tutorial
- CSS Variables (Custom Properties)
- Introduction to PostCSS
- The CSS margin property
- How to center an element with CSS
- CSS System Fonts
- How to print your HTML with style
- An introductory guide to CSS Transitions
- A CSS Animations Tutorial
- Introduction to CSS
- The CSS Guide
- How to setup Tailwind with PurgeCSS and PostCSS
- The Tailwind Cheat Sheet
- How to continuously rotate an image using CSS
- Making a table responsive using CSS
- How to debug CSS by bisecting
- CSS Selectors
- CSS Cascade
- CSS Specificity
- CSS Attribute Selectors
- CSS Colors
- CSS Units
- CSS url()
- CSS Typography
- The CSS Box Model
- The CSS position property
- CSS Media Queries and Responsive Design
- CSS Feature Queries
- CSS Transforms
- How to style lists using CSS
- CSS Vendor Prefixes
- CSS Inheritance
- CSS Pseudo Classes
- CSS Pseudo Elements
- Styling HTML Tables with CSS
- The CSS Display property
- The CSS calc() function
- CSS Borders
- Importing a CSS file using @import
- CSS Error Handling
- CSS Filters
- CSS Box Sizing
- CSS Backgrounds
- CSS Comments
- CSS Fonts
- CSS Padding
- The CSS float property and clearing
- CSS Normalizing
- The CSS z-index property
- How to disable text selection using CSS
- How to put an item at the bottom of its container using CSS
- How to invert colors using CSS
- Responsive pre tags in CSS
- Responsive YouTube Video Embeds
- What are good CSS Breakpoint values for Responsive Design?
- How to align center in flexbox