Định nghĩa đo lường pixel màn hình (px) trong CSS

Đơn vị px (pixel) trong CSS là đơn vị tuyệt đối tương đối: 1px = 1/96 inch (CSS reference pixel), ánh xạ đến device pixel tùy theo device pixel ratio (DPR).

Ví dụ: Positioning với px

<html>
  <head></head>
  <body>
    <div style="position: relative; left: 90px; top: 3px; background-color: yellow;">
      Div này có relative positioning, dịch 90px phải, 3px xuống.
    </div>
  </body>
</html>

Các đơn vị tuyệt đối khác

Đơn vị	Mô tả	Quy đổi
`cm`	Centimet	1cm = 37.8px
`mm`	Milimet	1mm = 3.78px
`in`	Inch	1in = 96px = 2.54cm
`pt`	Point (in typography)	1pt = 1/72 in = 1.333px
`pc`	Pica	1pc = 12pt = 16px
`px`	CSS Pixel (reference pixel)	1px = 1/96 in

Lưu ý về px hiện đại

Trên màn hình high-DPI (Retina, 4K), 1 CSS px = nhiều device pixel (DPR 2, 3...).
Trình duyệt tự scale để 1px CSS luôn kích thước nhìn thấy ~cùng nhau.
Dùng px cho border, border-radius, shadow, spacing nhỏ - những thứ cần độ chính xác pixel.
Dùng rem/em cho font-size, layout responsive.