Đơn vị đo trong CSS

CSS-Units
CSS-Units

Trong CSS có nhiều thuộc tính nhận giá trị là một giá trị đo độ lớn hoặc độ dài như font-size, margin, padding…vv Để quy định kích thước cho các thuộc tính này, CSS cung cấp cho chúng ta một vài đơn vị đo khác nhau.

Có khoảng 15 loại đơn vị đo trong CSS được chia vào 2 nhóm chính.

Độ dài tuyệt đối

Các đơn vị đo trong nhóm này bao gồm:

Đơn vị Mô tả
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px pixels (1px = 1/96 in)
pt points (pt = 1/72 in)
pc picas (1pc = 12pt)

Đơn vị px có thể bị ảnh hưởng bởi chất lượng màn hình. Đối với các màn hình có dpi thấp 1px sẽ tương đương với 1 điểm ảnh trên màn hình. Tuy nhiên, đối với các màn hình có độ phân giải cao thì 1px sẽ tương đương với nhiều điểm ảnh.

Độ dài tương đối

Kích thước của các đơn vị này thường thể hiện tỉ lệ với các phần tử liên quan tới nó. Các đơn vị đo trong nhóm này gồm:

Đơn vị Mô tả
em Tùy theo font-size của phần tử hiện tại. Ví dụ: 2em nghĩa là gấp 2 lần kích thước của font-size hiện tại.
ex Tùy theo thuộc tính x-heigh của font hiện tại. Đơn vị này rất hiếm gặp.
ch Tùy theo chiều rộng của ký tự 0 (số không).
rem Tùy theo font-size của phần tử root.
vw 1% kích thước chiều rộng của viewport
vh 1% kích thước chiều cao của viewport
vmin 1% kích thước nhỏ hơn của viewport
vmax 1% kích thước lớn hơn của viewport
% Liên quan đến phần tử cha

Viewport chính là khu vực mà trình duyệt web hiển thị nôi dung của trang web.

Viewport
Viewport