8px → REM

8px to REM — 0.5rem at 16px Base

At the default browser root size of 16px, 8px equals 0.5rem. Formula: rem = px ÷ 16.

Last reviewed: June 28, 2026

CSS snippet

.example {
  font-size: 0.5rem; /* 8px at 16px root */
  padding: 0.5rem;
}

PX to REM formula

rem = px ÷ root font size

8px ÷ 16px = 0.5rem

Worked example: To convert 8px at a 16px root, divide 8 by 16. 8 ÷ 16 = 0.5. Write font-size: 0.5rem; instead of font-size: 8px; so text scales when users enlarge their browser default font size.

Common use cases at 8px (0.5rem)

Category	Tailwind / design use	CSS property example
Font size	text-xs (0.75rem / 12px)	`font-size: 0.5rem;`
Spacing	p-2, gap-2, m-2	`padding: 0.5rem;`
Gap / margin	p-2, gap-2, m-2	`gap: 0.5rem;`

  
Nearby pixel conversions
    8px
 
  10px
 
  12px
 
  14px
 
  16px
 
  18px
 
  20px
 
  24px
 
  30px
 
  40px
 
  48px
 
  50px
 
 
  
Also see  10px to rem
.
 
 
 8px to REM FAQ
How do you convert 8px to rem?
Divide 8 by the root font size. At the default 16px base: 8 ÷ 16 = 0.5rem. Formula: rem = px ÷ root font size.
What is 8px in rem at 16px base?
At a 16px root font size, 8px equals exactly 0.5rem. This is the browser default unless your project or the user changes html { font-size }.
Should I use 0.5rem or 8px in CSS?
Use 0.5rem for typography and spacing that should scale with the user's root font-size preference — important for accessibility. Reserve 8px for fixed values like 1px borders or bitmap image dimensions.
How do I convert 0.5rem back to pixels?
Multiply 0.5rem by 16: 0.5 × 16 = 8px. Reverse formula: px = rem × root font size.
Where is 8px commonly used in web design?
8px (0.5rem) maps to text-xs (0.75rem / 12px) in typical design systems. For Tailwind spacing, see p-2, gap-2, m-2. Check the use-case table on this page for CSS property examples.
    Full converter
 
PX to REM Converter — any value, custom base
  
   Cheat sheet
 
PX to REM cheat sheet — 12px through 64px