Em, Rem, %: Ba "Chàng Ngự Lâm" Kích Thước Trong CSS - Bạn Dùng Đúng Cách Chưa?

Chào các bạn, là tôi đây, người bạn đồng hành trong thế giới mã hóa! Hôm nay, chúng ta sẽ cùng "giải mã" ba đơn vị kích thước tương đối quen thuộc nhưng đôi khi lại gây nhầm lẫn nhất trong CSS: em, rem và %. Nếu bạn vẫn đang loay hoay không biết nên dùng cái nào cho trường hợp nào, bài viết này là dành cho bạn!

Trong kỷ nguyên của thiết kế responsive, việc sử dụng các đơn vị tương đối thay vì px cố định là một yêu cầu bắt buộc để website của bạn trông đẹp mắt trên mọi kích thước màn hình. Nhưng mỗi đơn vị lại có một "tính cách" riêng, và việc hiểu rõ chúng sẽ giúp bạn viết CSS hiệu quả, dễ bảo trì hơn rất nhiều.

em: Đơn Vị "Con Theo Cha"

Hãy hình dung em như một đứa con rất nghe lời cha mẹ. Kích thước của nó sẽ phụ thuộc vào font-size của phần tử cha trực tiếp (parent element).

• Nếu phần tử cha không định nghĩa font-size, nó sẽ kế thừa từ ông/bà nội, và cứ thế tiếp tục cho đến khi tìm thấy một giá trị được định nghĩa.
• Ví dụ: Nếu font-size của phần tử cha là 16px, thì 1em sẽ bằng 16px. Nếu bạn set font-size: 1.2em cho con, nó sẽ là 1.2 * 16px = 19.2px.

Điểm mạnh: Tuyệt vời để giữ tỷ lệ kích thước các thành phần bên trong một khối riêng biệt. Ví dụ, trong một card sản phẩm, bạn muốn tiêu đề và mô tả có tỷ lệ nhất định so với nhau và với kích thước chung của card.

Điểm yếu: Dễ gây ra hiệu ứng "chuỗi" (compounding issue). Nếu bạn có các phần tử em lồng vào nhau, kích thước có thể tăng lên hoặc giảm xuống một cách khó kiểm soát. Hãy xem ví dụ:

.parent { font-size: 16px; }.child { font-size: 1.2em; /* 1.2 * 16px = 19.2px */ }.grandchild { font-size: 1.2em; /* 1.2 * 19.2px = 23.04px */ }

Thấy chưa? Chỉ qua hai lớp, kích thước đã bị "phóng đại" hơn mong muốn rồi.

rem: Đơn Vị "Con Theo Ông Nội" (Root em)

Khác với em, rem (viết tắt của "root em") là một đứa cháu cực kỳ độc lập và chỉ nghe lời "ông nội" duy nhất: đó là font-size của phần tử gốc html. Bất kể phần tử cha của nó có font-size là bao nhiêu, rem luôn luôn tham chiếu đến font-size của html.

• Nếu bạn không định nghĩa font-size cho html, trình duyệt thường sẽ mặc định là 16px. Khi đó, 1rem = 16px.
• Mẹo nhỏ vàng: Để dễ tính toán và quản lý, nhiều lập trình viên thường đặt font-size cho html là 62.5%. Tại sao ư? Vì 62.5% của 16px (mặc định) là 10px. Khi đó, 1rem = 10px, và bạn có thể dễ dàng chuyển đổi từ px sang rem (ví dụ: 18px thành 1.8rem).

html { font-size: 62.5%; /* 1rem = 10px */ }body { font-size: 1.6rem; /* 16px */ }h1 { font-size: 3rem; /* 30px */ }.button { padding: 1.2rem 2rem; /* 12px 20px */ }

Điểm mạnh: Cực kỳ dễ quản lý và dự đoán. Tránh được hiệu ứng chuỗi của em. Lý tưởng cho việc định nghĩa font-size cho toàn bộ website, margin, padding của các thành phần chính, và bất kỳ kích thước nào bạn muốn có sự nhất quán và khả năng điều chỉnh dễ dàng trên toàn trang.

%: Đơn Vị "Tương Đối Toàn Năng"

Đơn vị % (phần trăm) có lẽ là quen thuộc nhất, nhưng cũng có những "cú lừa" nhỏ mà bạn cần biết. Nó luôn dựa trên kích thước của phần tử cha, nhưng cái "gốc" để tính phần trăm sẽ thay đổi tùy thuộc vào thuộc tính CSS bạn đang dùng.

• font-size: Tương tự em, % sẽ dựa trên font-size của phần tử cha. Nếu cha là 16px, con font-size: 120% sẽ là 19.2px.
• width, height: Dựa trên width hoặc height của phần tử cha. Tuyệt vời cho việc tạo layout responsive!
• padding, margin: Đây là điểm cần lưu ý! Khi bạn dùng % cho padding hoặc margin (dù là trên, dưới, trái, phải), nó sẽ luôn dựa trên chiều rộng (width) của phần tử cha. Điều này có thể gây bất ngờ nếu bạn mong đợi padding-top: 10% sẽ dựa trên chiều cao của cha.

.container { width: 800px; height: 400px; }.box {  width: 50%; /* 50% of 800px = 400px */  height: 50%; /* 50% of 400px = 200px */  padding-top: 10%; /* 10% of 800px = 80px (dựa vào width của .container) */  font-size: 120%; /* 120% of parent's font-size */}

Điểm mạnh: Rất linh hoạt cho các bố cục co giãn và căn chỉnh vị trí. Đặc biệt mạnh mẽ với width và height.

Điểm yếu: Hành vi không nhất quán của % với padding/margin có thể gây nhầm lẫn ban đầu.

Khi Nào Dùng Gì? Tóm Tắt Nhanh

Để dễ nhớ, đây là một hướng dẫn nhanh:

• rem: Lựa chọn hàng đầu cho font-size toàn trang, margin/padding của các block lớn, và các kích thước chung của component mà bạn muốn dễ dàng điều chỉnh tổng thể. Nó tạo ra một "hệ thống" kích thước đồng nhất.
• em: Thích hợp cho các kích thước nội bộ của một component, nơi bạn muốn mọi thứ tỷ lệ theo font-size của chính component đó. Ví dụ, kích thước icon trong một button, khoảng cách giữa các phần tử nhỏ trong một thẻ.
• %: Dùng cho bố cục co giãn (width, height của các cột, container) hoặc khi bạn muốn một phần tử co giãn theo kích thước của phần tử cha theo một cách rõ ràng và trực quan (trừ padding/margin dọc).

Lời Kết

Việc nắm vững em, rem và % không chỉ giúp bạn viết CSS "chuẩn" hơn mà còn là bước đệm quan trọng để tạo ra những trang web thực sự responsive và dễ tiếp cận. Hãy thử áp dụng chúng vào dự án tiếp theo của bạn, và bạn sẽ thấy sự khác biệt!

Nếu có bất kỳ thắc mắc nào, đừng ngần ngại để lại bình luận nhé. Hẹn gặp lại trong bài viết tiếp theo!