Các đơn Vị đo độ Dài Trong Css: Px, Mm, Cm, Em, Rem - Code & Coffe

Trang chủ » Em Trong Css » Các đơn Vị đo độ Dài Trong Css: Px, Mm, Cm, Em, Rem - Code & Coffe

Có thể bạn quan tâm

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 …

Xem thêm

  • Biến toàn cục dùng trong CSS

Đơ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. <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>
123456 <div style="font-size: 20px">font-size phầntửcha20px<div style="font-size: 0.5em">Cỡfont thiếtlập0.5em(bằngnửaphầntử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: :root { font-size: 16px; color: #333; }
1234 :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ổ – chiều rộng kích thước màn hình
vh Bằng 1% chiều cao cửa sổ – chiều cao kích thước màn hình

Khi tính toán trong CSS chúng ta dùng cú pháp calc như bên dưới

.cf-img-full-page-right{ padding-left: calc(50vw - 180px); }
123 .cf-img-full-page-right{padding-left:calc(50vw-180px);}

5/5 - (2 bình chọn) Share Tweet Save Share Share Bài viết mới:
  • 4 cách tăng kích thước upload size trên WordPress
  • Tải banner miễn phí 2020 cực đẹp
  • Ẩn thanh menu của Woocommerce trong admin
  • Hướng dẫn tạo Restore point trên Windows 10
  • 50 bảng màu tham khảo cho thiết kế web chuyên nghiệp

Từ khóa » Em Trong Css