Đơn vị CSS

Đơn vị CSS

CSS có nhiều đơn vị biểu thị chiều dài khác nhau.

Nhiều thuộc tính CSS chấp nhận giá trị "chiều dài", chẳng hạn như width,margin,padding,font-size v.v.

Chiều dài là một số sau đó theo đơn vị chiều dài, chẳng hạn như 10px,2em v.v.

Mẫu

Cài đặt các giá trị chiều dài khác nhau bằng px (pixel):

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

Thử làm riêng

Không nên có khoảng trống giữa số và đơn vị. Tuy nhiên, nếu giá trị là 0, có thể bỏ qua đơn vị.

Đối với một số thuộc tính CSS, cho phép sử dụng chiều dài âm.

Đơn vị chiều dài có hai loại:Đơn vị tuyệt đốivàĐơn vị tương đối.

Chiều dài tuyệt đối

Đơn vị chiều dài tuyệt đối là cố định, chiều dài biểu thị bằng bất kỳ đơn vị tuyệt đối nào sẽ hiển thị chính xác kích thước này.

Không nên sử dụng đơn vị chiều dài tuyệt đối trên màn hình vì kích thước màn hình thay đổi rất lớn. Tuy nhiên, nếu biết phương tiện đầu ra, có thể sử dụng chúng, ví dụ như cho布局 in (print layout).

Đơn vị Mô tả TIY
cm Centimet Try It
mm Millimet Try It
in Inch (1in = 96px = 2.54cm) Try It
px * Pixel (1px = 1/96 của 1in) Try It
pt Điểm (1pt = 1/72 của 1in) Try It
pc Pica (1pc = 12 pt) Try It

* Pixel (px) là tương đối với thiết bị xem. Đối với thiết bị dpi thấp, 1px là một điểm thiết bị trên màn hình. Đối với máy in và màn hình có độ phân giải cao, 1px biểu thị nhiều điểm thiết bị.

Chiều dài tương đối

Đơn vị chiều dài tương đối quy định chiều dài tương đối với thuộc tính chiều dài khác. Đơn vị chiều dài tương đối có khả năng mở rộng tốt hơn giữa các phương tiện render khác nhau.

Đơn vị Mô tả TIY
em So với kích thước font-size của yếu tố (font-size) (2em biểu thị kích thước font hiện tại gấp 2) Try It
ex So với x-height của font hiện tại (sử dụng rất ít) Try It
ch So với độ rộng của "0" (số không) Try It
rem Kích thước font-size của yếu tố gốc Try It
vw So với chiều rộng của视口* 1% Try It
vh So với chiều cao của视口* 1% Try It
vmin So với kích thước nhỏ hơn 1% của视口* Try It
vmax Relative to the viewport * larger size of 1% Try It
% Relative to the parent element Try It

Tip:em and rem units can be used to create perfect scalable layouts!

* Viewport (Viewport) = Size of Browser Window. If the viewport is 50 centimeters wide, then 1vw = 0.5 centimeters.

Browser Support

The numbers in the table indicate the first browser version that fully supports this length unit.

Length Unit
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0