Hiểu đơn vị tuyệt đối và tương đối trong CSS

Đơn vị tuyệt đối (CSS Absolute Units)

Các đơn vị độ dài tuyệt đối được cố định so với nhau. Dùng khi định dạng đầu ra đã biết trước.

STT	Đơn vị & Mô tả
1	cm centimet
2	mm milimet
3	in inch (1in = 96px = 2.54cm)
4	px * pixel (1px = 1/96 của 1in)
5	pt point (1pt = 1/72 của 1in)
6	pc pica (1pc = 12 pt)

Ví dụ đơn vị tuyệt đối

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  text-decoration: overline underline;
  text-decoration-color: blue;
  font-size: 0.3in;
}
</style>
</head>
<body>
<h1>Chi tiết</h1>
<p class="demo">Trung tâm thi gần trường ABC College.</p>
<p class="demo2">Kỳ thi bắt đầu lúc 9AM.</p>
</body>
</html>

Kết quả

Hiểu đơn vị tuyệt đối và tương đối trong CSS

Đơn vị tương đối (CSS Relative Units)

Đơn vị độ dài tương đối trong CSS dùng để chỉ định độ dài tương đối đối với thuộc tính độ dài khác.

STT	Đơn vị & Mô tả
1	em Tương đối font-size của phần tử (4em = 4 lần font hiện tại)
2	ex Tương đối x-height của font hiện tại
3	ch Tương đối chiều rộng ký tự "0"
4	rem Tương đối font-size của root element (html)
5	vw 1% chiều rộng viewport
6	vh 1% chiều cao viewport
7	vmin 1% chiều nhỏ hơn của viewport
8	vmax 1% chiều lớn hơn của viewport
9	% Tương đối phần tử cha

Ví dụ đơn vị tương đối

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  text-decoration: overline underline;
  text-decoration-color: blue;
  font-size: 1.4em;
}
</style>
</head>
<body>
<h1>Chi tiết</h1>
<p class="demo">Trung tâm thi gần trường ABC College.</p>
<p class="demo2">Kỳ thi bắt đầu lúc 9AM.</p>
</body>
</html>

Kết quả

Hiểu đơn vị tuyệt đối và tương đối trong CSS

Ví dụ 2: đơn vị ch

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  text-decoration: overline underline;
  text-decoration-color: blue;
  font-size: 4ch;
}
</style>
</head>
</head>
<body>
<h1>Chi tiết</h1>
<p class="demo">Trung tâm thi gần trường ABC College.</p>
<p class="demo2">Kỳ thi bắt đầu lúc 9AM.</p>
</body>
</html>

Kết quả

Hiểu đơn vị tuyệt đối và tương đối trong CSS

Khuyến nghị:

rem cho font-size gốc (root)
em cho component nội bộ
vw/vh cho layout full-screen
% cho width container
Tránh px cho text trong thiết kế responsive