Css có nhiều đơn vị đo độ dài khác nhau, chúng ta cần phân biệt và sử dụng chúng một cách hiệu quả tránh các lỗi phát sinh trên các thiết bị khác nhau. Các đơn vị kích thước trong css gồm đơn vị tuyệt đối như px, mm, cm và các đơn vị tương đối như em, rem để xác định kích thước rộng, cao, cỡ font …
Tóm Tắt
Đơn vị kích thước tuyệt đối trong CSS
Đây là những đơn vị không có liên quan đến các thành phần khác và kích thước giống nhau ở các loại màn hình. Những đơn vị tuyệt đối thường dùng trong css là
Ký hiệu Đơn vị
Diễn giải
cm
centimet (dài bằng 1/100 m)
mm
milimét (dài bằng 1/1000 m)
in
Inche: 1in = 2.54cm = 96px
px
Điểm ảnh (10px là 10 điểm ảnh màn hình)
pt
Điểm (point), đây là đơn vị phổ biến dùng biểu diễn kích thước font chữ (72pt = 1inch = 25.4mm) hay 1pt = (1/72)in
Đơn vị kích thước tương đối trong CSS
Những đơn vị này sẽ phụ thuộc vào những thành phần khác nhau thường là kích thước font chữ hoặc là các phần tử cha trong HTML
Ký hiệu Đơn vị
Diễn giải
em
Bằng cỡ font của phần tử cha. Có nghĩa phần tử cha có cỡ (font-size) là 14px, thì 1em là 14px – nếu cỡ font phần tử cha là 10pt thì 2em là 20px.
1
2
3
4
5
6
<
div
style
=
“font-size: 20px”
>
font
–
size
ph
ầ
n
t
ử
cha
20px
<
div
style
=
“font-size: 0.5em”
>
C
ỡ
font
thi
ế
t
l
ậ
p
0.5em
(
b
ằ
ng
n
ử
a
ph
ầ
n
t
ử
cha
)
<
/
div
>
<
/
div
>
rem
Bằng cỡ font của phần tử gốc – root, trong CSS để thiết lập các thuộc tính của root thì dùng ký hiệu :root, rồi định nghĩa các thuộc tính giống class:
1
2
3
4
:
root
{
font
–
size
:
16px
;
color
:
#333;
}
lh
Bằng chiều cao dòng phần tử cha
vw
Bằng 1% chiều rộng cửa sổ
vh
Bằng 1% chiều cao cửa sổ
5/5 – (1 bình chọn)
