~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/css/8css-units

# CSS Units

Units define sizes in CSS. Choosing the right unit affects responsiveness and accessibility.

## Absolute Units

Fixed sizes that don't change:

```css
/* Pixels */
width: 100px;
font-size: 16px;

/* Points (print) */
font-size: 12pt;

/* Inches */
width: 5in;

/* Centimeters */
width: 10cm;

/* Millimeters */
width: 100mm;
```

**Best for:** Borders, small adjustments, print styles

## Relative Units

Units relative to other values:

### em

Relative to parent element's font size:

```css
/* Parent: 16px */
.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em;    /* 24px (16 × 1.5) */
  width: 10em;         /* 160px (16 × 10) */
  padding: 1em;        /* 16px (16 × 1) */
}
```

**Problem:** Compounds in nested elements.

### rem

Relative to root element's font size:

```css
/* Root: 16px */
html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;     /* 32px (16 × 2) */
}

p {
  font-size: 1rem;     /* 16px (16 × 1) */
}

.child {
  font-size: 1.5rem;   /* 24px (16 × 1.5) — doesn't compound */
}
```

**Best for:** Font sizes, consistent sizing

### Percentage

Relative to parent element:

```css
.parent {
  width: 500px;
}

.child {
  width: 50%;          /* 250px (500 × 0.5) */
  font-size: 120%;     /* 19.2px (16 × 1.2) */
}
```

### Viewport Units

Relative to the viewport (browser window):

```css
/* vw: viewport width */
.full-width {
  width: 100vw;        /* Full viewport width */
}

/* vh: viewport height */
.full-height {
  height: 100vh;       /* Full viewport height */
}

/* vmin: smaller of vw/vh */
.small-square {
  width: 50vmin;
  height: 50vmin;
}

/* vmax: larger of vw/vh */
.large-square {
  width: 50vmax;
  height: 50vmax;
}
```

### Sized Units

Relative to font size:

```css
/* ch: width of "0" character */
.narrow-column {
  width: 40ch;
}

/* ex: height of "x" character */
.tall-text {
  line-height: 2ex;
}

/* cap-height: height of capital letters */
.capital-text {
  font-size: 1cap;
}
```

## Complete Example

```css
/* Root font size for rem */
html {
  font-size: 16px;
}

/* Responsive typography */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

h2 {
  font-size: clamp(1.25rem, 3vw, 2rem);
}

p {
  font-size: 1rem;
  line-height: 1.6;
}

/* Container with max-width */
.container {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

/* Card with responsive sizing */
.card {
  width: min(100%, 300px);
  padding: clamp(1rem, 2vw, 2rem);
  margin: 1rem;
}

/* Hero section */
.hero {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sidebar */
.sidebar {
  width: clamp(200px, 25vw, 300px);
}

/* Content area */
.content {
  flex: 1;
  min-width: 0; /* Prevent overflow */
}
```

## CSS Functions with Units

### clamp()

Minimum, preferred, maximum:

```css
font-size: clamp(1rem, 2.5vw, 2rem);
/* Minimum: 1rem, Preferred: 2.5vw, Maximum: 2rem */

width: clamp(300px, 50%, 600px);
```

### min() and max()

```css
width: min(100%, 500px);    /* Smaller of the two */
width: max(300px, 50%);     /* Larger of the two */
```

### calc()

Mathematical calculations:

```css
width: calc(100% - 40px);
height: calc(100vh - 80px);
font-size: calc(1rem + 2vw);
```

## Unit Comparison

| Unit | Relative To | Best For |
|------|-------------|----------|
| px | Nothing (absolute) | Borders, small sizes |
| em | Parent font size | Padding, margin |
| rem | Root font size | Font sizes |
| % | Parent element | Width, layout |
| vw | Viewport width | Full-width elements |
| vh | Viewport height | Full-height sections |
| ch | Character width | Line length |
| clamp() | — | Responsive sizing |

## Complete Example: Responsive Layout

```css
:root {
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
}

body {
  font-size: 1rem;
  line-height: 1.6;
}

.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
  padding-block: var(--spacing-lg);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--spacing-md);
}

.card {
  padding: var(--spacing-md);
  border: 1px solid #ddd;
  border-radius: 0.5rem;
}

/* Responsive typography */
h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
  margin-bottom: var(--spacing-md);
}

p {
  font-size: clamp(0.9rem, 2vw, 1rem);
  max-width: 65ch; /* Optimal reading width */
}

/* Hero section */
.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--spacing-xl) var(--spacing-md);
}
```

## Best Practices

1. **Use rem for font sizes** — Scales with user preferences
2. **Use em for padding/margin** — Scales with font size
3. **Use % for widths** — Responsive to parent
4. **Use vw/vh for full-screen** — Viewport-relative
5. **Use clamp()** — Modern responsive sizing

## Common Mistakes

1. **Using px for everything** — Doesn't scale
2. **Using em for everything** — Compounds in nesting
3. **Ignoring user preferences** — Always use relative units
4. **Not testing on mobile** — Viewport units behave differently
5. **Overusing viewport units** — Can cause scrolling issues

No changes yet

cancel