If you have ever written CSS, you have likely used the px unit. It is one of the most common units in web design. But what exactly is a pixel, and how does it work in CSS? This guide covers everything you need to know.
What Does PX Mean in CSS?
In CSS, px stands for pixel. The specification classes it as an absolute length unit, alongside in, cm, mm and pt. When you set an element's width to 100px, you are telling the browser to render that element 100 CSS pixels wide.
Unlike relative units such as rem or em, pixels do not change based on the parent element's font size or the user's default font-size preference. A 24px heading is 24px whether it sits in the page body, inside a card, or five levels deep in a nested component.
How Big Is One CSS Pixel?
The CSS specification defines a fixed relationship between the absolute units: 1in = 96px. Every other physical unit is derived from that anchor, which is why px-to-pt and px-to-mm conversions always give the same answers regardless of your monitor.
| Unit | Equivalent in px | Exact relationship |
|---|---|---|
| 1in | 96px | Anchor value |
| 1cm | ≈ 37.8px | 96 ÷ 2.54 |
| 1mm | ≈ 3.78px | 96 ÷ 25.4 |
| 1pt | ≈ 1.333px | 96 ÷ 72 |
| 1pc | 16px | 12pt |
On screens, these values are not guaranteed to match a physical ruler. A "1in" box on a phone and on a 27-inch monitor will measure differently, because the browser scales CSS pixels so that content looks reasonable at the typical viewing distance for that device. The spec describes this with a "reference pixel": roughly the visual size of one pixel on a 96 DPI display viewed from about arm's length. In print, by contrast, browsers do map 96px to one real inch, which is why px-based layouts can be printed at predictable sizes.
CSS Pixels vs Device Pixels
This is where it gets interesting. A CSS pixel is not always the same as a physical screen pixel. On high-resolution displays (like Apple Retina screens and most modern phones), one CSS pixel may be drawn with 2, 3 or even a fractional number of physical device pixels.
This is controlled by the device pixel ratio (DPR), exposed in JavaScript as window.devicePixelRatio. A screen with a DPR of 2 renders every CSS pixel using 4 physical pixels (2×2), which makes text and vector graphics look sharper without making them physically larger.
A Worked Example
A phone with a physical screen resolution of 1170 × 2532 device pixels and a DPR of 3 reports a CSS viewport of 390 × 844 pixels (1170 ÷ 3 = 390). Your media queries, vw units and layout all work against that 390px figure, not 1170. That is also why the viewport meta tag matters: without it, mobile browsers pretend the viewport is roughly 980px wide and shrink the result. Our guide on what the viewport is in CSS covers this in more detail.
What DPR Means for Images
A 300px-wide image slot on a DPR 2 screen needs a 600px-wide source file to look crisp. You can serve the right file with srcset:
<img src="photo-300.jpg"
srcset="photo-300.jpg 1x, photo-600.jpg 2x, photo-900.jpg 3x"
width="300" height="200" alt="Product photo">The width and height attributes stay in CSS pixels; only the source file changes.
Is PX Really Fixed? Zoom and Font Settings
"Absolute" does not mean "immune to everything". There are two different user actions to keep apart:
- Browser zoom (Ctrl/Cmd and +) enlarges CSS pixels themselves. At 200% zoom, a 100px box covers twice as many device pixels, and the viewport width in CSS pixels halves, so px layouts do scale and media queries can switch.
- Default font-size setting (in the browser's appearance or accessibility settings) changes the root font size, typically from 16px to 20px or 24px. Values in
remandemgrow with it; values written in px do not.
That second case is the main reason accessibility guidance recommends relative units for text. We break it down step by step in how browser zoom affects rem and em.
Sub-Pixel Values and Rounding
CSS accepts fractional pixels, such as width: 33.333px or 0.5px. Browsers lay out with sub-pixel precision internally, then decide how to paint the result onto real device pixels. On a DPR 2 screen, a 0.5px border can map to exactly one device pixel and look like a fine hairline; on a DPR 1 screen the same border is usually rounded up to 1px or drawn faintly. Borders are commonly snapped to whole device pixels, which is one reason a 1px border is the safest choice when you want consistent results.
When Should You Use PX?
Pixels are best used in these situations:
- Borders and outlines — e.g.,
border: 1px solid #ccc; - Box shadows — e.g.,
box-shadow: 0 2px 8px rgba(0,0,0,0.1); - Media queries — when targeting specific screen widths
- Icons and small fixed-size elements, such as a 24px icon or a 40px avatar
- Canvas and image dimensions, where a value must match a bitmap's intrinsic size
For font sizes and spacing, consider using relative units like rem or em to support better accessibility. A typical setup mixes both:
.card {
padding: 1.5rem; /* 24px at the default root size */
font-size: 1rem; /* follows the user's preference */
border: 1px solid #d0d7de;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}If you are deciding unit by unit, our comparison of PX vs REM gives a simple decision rule.
Common Mistakes With PX
- Setting the root font size in px.
html { font-size: 16px; }overrides the user's chosen default, so every rem value stops responding to it. Use a percentage such as100%, or leave it unset. - Assuming px equals screen pixels. Designs exported at 2× or 3× need to be divided by the DPR before the numbers go into CSS.
- Fixed px heights on text containers. A
height: 48pxbutton clips its label when the text grows. Usemin-heightwith padding instead. - Pixel widths on fluid layouts. A
width: 1200pxwrapper causes horizontal scrolling on small screens; pair it withmax-widthand a percentage width.
Frequently Asked Questions
Is 1px always the thinnest line a screen can show?
No. On high-DPR screens, a 1px CSS line is 2 or 3 device pixels thick, so a thinner line is physically possible. You can try 0.5px borders on those devices, but results vary between browsers, so test before relying on it.
How many pixels is 1rem?
By default 1rem equals 16px, because every major browser ships with a 16px default font size. If the user changes that setting, or your CSS sets the root font size to something else, 1rem changes with it.
Why does my 16px text look smaller on a phone than in the design file?
Design files are often drawn at 2× or 3× scale. A 48px label in a 3× mockup corresponds to 16px in CSS. Check the export scale before copying numbers across.
Should media queries use px or em?
Both work. Px breakpoints are easy to read; em breakpoints also respond to the user's default font-size setting, so a layout can switch to a narrower arrangement when text is enlarged. Pick one and use it consistently across the project.
Try It Yourself
Need the rem equivalent of a pixel value from a design file? Paste it into our PX to REM converter, or explore every unit side by side in the CSS unit converter.