Đơn vị đo trong CSS bao gồm các đơn vị tuyệt đối như inch, centimet, point, v.v … cũng như các đơn vị đo tương đối như phần trăm và đơn vị em. Bạn cần những giá trị này để chỉ định các đơn vị đo khác nhau trong CSS, ví dụ border = “1px solid red” .
Bảng dưới đây liệt kê tất cả các đơn vị đo lường CSS cùng với các ví dụ:
| Đơn vị | Mô tả | Thí dụ |
|---|---|---|
| % | Xác định một đơn vị đo theo phần trăm liên quan đến một giá trị khác, thường là một phần tử bao quanh. | p {font-size: 16pt; line-height: 125%;} |
| cm | Xác định một đơn vị đo bằng cm. | div {margin-bottom: 2cm;} |
| em | Một thước đo tương đối cho chiều cao của một phông chữ trong không gian em. Bởi vì một đơn vị em tương đương với kích thước của một phông chữ nhất định, nếu bạn chỉ định một phông chữ cho 12pt, mỗi “em” đơn vị sẽ là 12pt; Do đó, 2em sẽ là 24pt. | p {letter-spacing: 7em;} |
| ex | Giá trị này định nghĩa một đơn vị đo tương ứng với chiều cao x của phông chữ. Chiều cao x được xác định bởi chiều cao của chữ hoa chữ thường x. | p {font-size: 24pt; line-height: 3ex;} |
| in | Xác định một đơn vị đo bằng inch. | p {word-spacing: .15in;} |
| mm | Định nghĩa đơn vị đo bằng milimet. | p (word-spacing: 15mm;} |
| pc | Xác định một đơn vị đo trong picas. Một pica tương đương với 12 điểm; Do đó, có 6 picas mỗi inch. | p {font-size: 20pc;} |
| pt | Định nghĩa đơn vị đo theo điểm. Một điểm được định nghĩa là 1/72 của một inch. | body {font-size: 18pt;} |
| px | Định nghĩa đơn vị đo trong các điểm ảnh trên màn hình. | p (padding: 25px;} |
| vh | 1% chiều cao của khung nhìn. | h2 {font-size: 3.0vh; } |
| vw | 1% chiều rộng khung nhìn | h1 {font-size: 5.9vw; } |
| vmin | 1vw hoặc 1vh, tùy theo số nào nhỏ hơn | p {font-size: 2vmin;} |