Các đơn vị px em rem mm đo độ dài trong CSS

Posted on by mtoplistChuyên mục:Top List

Tìm hiểu các loại đơn vị tuyệt đối trong CSS 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 …

Đơn vị kích thước (độ dài, lớn bé) trong CSS

Các đơn vị về kích thước để xác định độ dài, ngắn, lớn, bé của các đối tượng liên quan
đến kích thước – ví dụ như chiều cao phần tử 50px (50 pixel – điểm ảnh) hoặc chiều cao phần
tử là 30em. Có hai loại đơn vị sử dụng trong CSS – loại đơn vị tuyệt đối và đơn vị độ dài
tương đối.

Đơn vị kích thước tuyệt đối trong CSS

Những loại đơn vị này thì giá trị của nó độc lập không liên quan đến các phần tử thành phần khác, dùng đơn
vị này ở trong HTML thì kích cỡ đo được đều giống nhau. Dưới đây là những đơn vị tuyệt đối hay dùng:

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

Bạn có quyền sử dụng bất kỳ đơn vị nào,
tuy nhiên phổ biến để thể hiện trên màn hình là đơn vị px,
các đơn vị tuyệt đối khác như cm phù hợp để thể hiện trang in.

Đơn vị kích thước tương đối trong CSS

Khi dùng các đơn vị tương đối thì độ lớn thực tế phụ thuộc vào thành phần khác, thường là
phụ thuộc vào thuộc tính phần tử cha trong HTML hoặc phụ thuộc vào kích thước viewport (kích thước cửa sổ hiện tại của trình duyệt).
Lợi ích của đơn vị này là nó tự động thu phóng độ lớn (chiều dài, font chữ) theo phần tử cha

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.

<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>

Cỡ font thiết lập 0.5em (bằng nửa phần tử cha)

font-size phần tử cha 20px

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:

: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ổ

ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB

Đăng ký nhận bài viết mới

mtoplist