CSS

Sử dụng đơn vị đo trong CSS

nguyen.le , 15 min read

Giới thiệu nội dung bài viết

Trong quá trình làm lập trình web, khi thực hiện một số các thuộc tính đòi hỏi cần sử dụng các đơn vị đo độ dài. Vì vậy trong CSS cung cấp rất nhiều đơn vị đo để người dùng có thể thao tác dễ dàng và nhanh chóng trong quá trình làm các dự án lập trình web CSS bao gồm các đơn vị đo tuyệt đối và tương đối. Cụ thể đơn vị centimeters, ex, in, millimeters, pica, point, pixel và phần trăm, em.
Những chia sẻ dưới đây sẽ giúp các bạn hiểu rõ hơn các đơn vị đo trên, cũng như hướng dẫn cụ thể cách khai báo đối với mỗi đơn vị đo trong lập trình web CSS thông qua các ví dụ minh hoạ.

1. Đơn vị đo

Trong css hỗ trợ cho chúng ta các đơn vị đo như inches, centimeters, phần trăm , em hoặc point

Ví dụ như ta muốn border của một table có kích thước là 1px thì ta khai báo như sau.

1
   table { border :1px solid #C00; }

2. Đơn vị đo phần trăm

Ví dụ anh mong muốn các chữ trong đoạn văn bản có chiều cao là 125% thì anh khai báo như sau

1
  p {font-size: 16pt; line-height: 125%;}

3. Đơn vị đo centimeters

Ví dụ như anh mong muốn khoảng cách khối lệnh div là 2 cm thì anh khai báo như sau

1
div { margin-bottom: 2cm;}

4. Đơn vị đo em

Ví dụ anh mong muốn khoảng cách giữa các ký tự trong đoạn văn là 7em.

1
p {letter-spacing: 7em;}

5. Đơn vị đo ex

Ví dụ anh muốn kích thước của font chữ cho chiều cao trong một đoạn văn bản

1
p {font-size: 24pt; line-height: 3ex;}

6. Đơn vị đo in

Ví dụ anh muốn khoảng cách giữa các từ trong một văn bản cách nhau 15 inches

1
p {word-spacing: .15in;}

7. Đơn vị đo millimeters

Ví dụ anh muốn khoảng cách giữa các từ trong một văn bản cách nhau 15 millimeters

1
p {word-spacing: .15mm;}

8. Đơn vị đo pica

1 pica sẽ bằng 12 points do đó 6 pica sẽ tương ứng là 1 inch. Ví dụ anh muốn kích thước font chữ trong đoạn văn bản là 20 pica.

1
p {font-size: 20pc;}

9. Đơn vị đo point

Một point sẽ tương ứng với 1/72 inch. Ví dụ anh muốn font chữ có kích thước 18pt

1
body {font-size: 18pt;}

10. Đơn vị đo pixel

Ví dụ anh muốn khoảng cách của đoạn văn bản cách lề là 25 pixel.

1
      p {padding: 25px;}