Pixel and percentage

Learn px and % units.

What is a pixel?

In CSS, the pixel (px) is the best-known absolute unit. When you write 16px, the browser treats it as a fixed length; the px value does not change when the screen or the parent changes.

Pixels are handy for font sizes, border widths and small gaps. For example, font-size: 16px looks consistent across devices.

The percentage unit

The percentage (%) unit is computed against the container. If you write width: 50% for a .box, the box takes half of its parent's width.

As the parent's width changes, the percentage changes too; that is why it works well in flexible layouts. For height, it is computed against the parent's height.

Absolute vs relative

Units come in two kinds: absolute units stay fixed on the device (px, pt), relative units change with a context (%, em, vw).

Absolute units are consistent but rigid. Relative units make the design adapt to the screen, which is why they are preferred in responsive work.

Exercise Mix percentage and pixel for a box

Write a .box selector. Set its width to 80% and its padding to 16px.

Show example solution

/* add the .box selector */
.box {
  width: 80%;
  padding: 16px;
}

Test yourself

Which one is an absolute unit?
```
/* an absolute unit stays fixed on the device */
```
- %
- px
- em
- vw
Show answer

px — Correct. px is an absolute unit; it stays fixed even when the screen or the parent changes.

Write the width as a percentage

.box {
  width: ____%;
}

Show answer

.box {
  width: 50%;
}

Match each unit to its kind

px

Absolute pixel unit
pt

Absolute point unit
%

Relative to parent
em

Relative to font size

Next lesson: em and rem

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies