
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.
