So sánh font size px và em

Đơn vị px là gì?
Đơn vị em là gì?
Ví dụ dễ hiểu so sánh kích thước em và px
Bảng so sánh px và em
Khi nào dùng?
Video thực hành

Đơn vị kích thước trong css em và px đều dùng để đặt kích thước trong CSS, nhưng cách tính khác nhau.

1. Đơn vị px là gì?

px (pixel) là đơn vị cố định. Ví dụ:

 p { font-size: 20px; }

Nghĩa là chữ luôn có kích thước khoảng 20 pixel, ít phụ thuộc phần tử cha. 20px luôn gần như giữ nguyên. Dễ kiểm soát chính xác. Ví dụ: 12px nhỏ 24px to hơn

2. Đơn vị em là gì?

em là đơn vị tương đối, phụ thuộc kích thước chữ của phần tử cha. Ví dụ:

 body { font-size: 16px; }  p { font-size: 2em; }

Nếu body = 16px thì: 1em = 16px 2em = 32px => font-size: 2em nghĩa là gấp 2 lần font của cha.

3. Ví dụ dễ hiểu so sánh kích thước em và px

div { font-size: 20px; }

p { font-size: 2em; }

Kết quả: div = 20px p = 40px vì 2em = 2 × 20px

4. Bảng so sánh px và em

Đặc điểm	px	em
Cách tính	Cố định	Phụ thuộc phần tử cha
Dễ dùng	Dễ hơn	Khó hơn lúc mới học
Linh hoạt responsive	Thấp	Cao
Ví dụ	20px	2em

5. Khi nào dùng?

Dùng px: khi mới học CSS, muốn kích thước chính xác.

Dùng em: khi làm giao diện co giãn, responsive.

Ví dụ: Button: padding: 10px Font responsive: font-size: 1.2em Mẹo nhớ nhanh: px = số cố định em = nhân theo cha Ví dụ cực ngắn: 20px = luôn 20 2em = gấp 2 lần cha.

6. Video thực hành

Tìm kiếm: