CSS Units - Tìm hiểu về REM và EM trong CSS

Relative Units trong CSS hay các đơn vị tương đối thường được sử dụng để tạo các trang web responsive, lý do là chúng có tỷ lệ phụ thuộc vào các parent element hay window size (tùy thuộc vào đơn vị chúng ta sử dụng).

Khi sử dụng các đơn vị tương đối để style cho trang web, chúng ta có thể tránh phải set lại các style như width, font-size, padding, margin... cho các kích thước màn hình khác nhau 🌝.

Trong CSS chúng ta có các Relative Units như: %, VH, VW, REM, EM,...

Hôm nay chúng ta sẽ tìm hiểu về hai đơn vị REM và EM, đây là hai đơn vị thường gây nhầm lẫn cho các bạn trong quá trình học CSS. Mình xin chỉ ra một số điểm khác biệt chính của hai đơn vị REM và EM trong bài viết này ^^.

REM trong CSS

REM trong CSS được viết gọn lại của root em. Nó có nghĩa là "The root element's font-size", hiểu đơn giản REM trong CSS sẽ được tính toán dựa trên kích thước font-size của html(root).

Nếu chúng ta không set cho HTML root một giá trị font-size, giá trị mặc định của font-size khi đó sẽ là 16px. Do đó, khi phần tử sử dụng đơn vị REM, phần tử này sẽ tìm để phần tử root xem giá trị font-size là bao nhiêu để tính toán và set giá trị.

Chúng ta cùng xem một ví dụ để hiểu hơn về REM trong CSS nhé:

<div class="parent">
  <div class="child">hello</div>
</div>

Mình sẽ demo sử dụng một container có class parent chứa phần tử có class child. Ta sẽ sử dụng REM làm đơn vị cho font-size của child.

html {
  font-size: 20px;
}
.child {
  font-size: 1rem;
}

Lúc này chúng ta sẽ thấy phần tử child với font-size: 1rem sẽ có font-size bằng với font-size của phần tử root là 20px. Lý do là chúng ta đã thêm cho root một font-size mới khác với giá trị ban đầu là 16px. Khi đó, một phần tử bất kỳ sử dụng rem sẽ được 1rem = 20px, tương tự ta có 1.5rem = 1.5*20 = 30px.

Khi phần tử root các bạn không set font-size cho nó, lúc này root sẽ có giá trị 16px và 1rem lúc này là 16px.

Giả sử chúng ta muốn padding cho phần tử child, với giá trị sau khi sử dụng REM tương đương với 30px thì sẽ tính toán thế nào? Chúng ta sẽ lấy 30/16 để đổi sang đơn vị REM đúng không 😃.

Chúng ta sẽ được như sau:

.child {
  font-size: 1rem;
  padding: 1.875rem: // 1.875rem = 30px
}

Với 30px ta sẽ đổi sang rem là 1.875rem với 1rem = 16px 😊.

Tiếp theo chúng ta sẽ cùng xem thử, với đơn vị EM, việc tính toán khác gì với REM không nhé!

EM trong CSS

Với đơn vị EM trong CSS, nó khác với REM ở chỗ nó sẽ sử dụng font-size của parent để tính toán giá trị cho nó, nếu như parent gần nó nhất không sử dụng font-size, nó sẽ tìm tới parent tiếp theo, cứ như vậy đến khi tìm thấy parent có sử dụng font-size, nó sẽ được tính toán giá trị dựa trên phần tử parent này.

Mình sẽ sử dụng phần tử parent và child ở ví dụ trên để xem EM sẽ trả về giá trị font-size tương ứng thế nào nhé, cùng set cho parent một font-size:

<div class="parent">
  <div class="child">hello</div>
</div>

.parent {
  font-size: 20px;
}
.child {
  font-size: 0.5em;
}

Với font-size của parent là 20px, khi phần tử child sử dụng font-size: 0.5em, kích thước font sẽ là 10px, vì 20px x 0,5em = 10px.

Giả sử chúng ta không set font-size cho parent ở trên thì sao? Lúc này child sẽ tìm phần tử chứa nó có font-size lúc này là root, vì giá trị mặc định của root lúc này là 16px. Và child sẽ mang giá trị font-size là 8px vì 16px x 0,5em = 8px.

Chúng ta có thể sử dụng EM cho padding, height, width và các thuộc tính khác và nó vẫn sẽ được tính toán dựa trên giá trị font-size của parent.

Cùng set thử cho child giá trị padding sử dụng EM:

.parent {
  font-size: 20px;
}
.child {
  font-size: 0.5em;
  height: 5em;
  padding: 0.5em;
}

Chúng ta dễ dàng tính toán được child có font-size là 10px đúng không ^^, vậy height sẽ là 5 x 20px = 100px ? Câu trả lời là không chính xác 🥶. Tại sao lại không đúng, lý do là vì trong child chúng ta đã sử dụng font-size cho phần tử, lúc này các thuộc tính trong phần tử child sẽ tính toán dựa trên font-size của child (Nếu có).

Như vậy height sẽ có giá trị 5 x 10px = 50px và padding là 0.5 x 10 = 5px.

Trong một số trường hợp, nếu chúng ta sử dụng EM trong các phần tử thuộc nhiều parent, các thuộc tính EM có thể sẽ khó sử dụng, ví dụ như:

<div class="parent">
  20px
  <div class="child">
    sử dụng EM: 1em => 20px
    <div class="child">
      sử dụng EM: 0.5em => 10px
      <div class="last-element">
        sử dụng EM: 0.5em => 5px
      </div>
    </div>
  </div>
</div>

Khi set font-size cho phần tử last-element sử dụng EM, chúng ta sẽ phải xem phần tử parent có font-size là bao nhiêu, nếu parent sử dụng EM ta sẽ phải tìm trên nó xem font-size có giá trị và đơn vị là gì 🥴. Chính vì lí do này mình hay sử dụng đơn vị REM hơn.

Kết luận

Cuối cùng mình xin ra một tổng kết nhỏ về EM và REM:

• Chúng ta nên sử dụng các relative units như EM hay REM khi trang web của chúng ta yêu cầu responsive.
• Đơn vị EM thường được tham chiếu đến font-size parent hoặc chính nó (nếu có).
• Đơn vị REM tham chiếu đến font-size phần tử Root.

Cá nhân mình hay sử dụng đơn vị REM hơn EM, vì sử dụng REM cho padding, margin, height, font-size,... chúng ta có các giá trị dựa trên font-size phần tử root và chúng ta có thể dễ dàng set font-size cho root nếu muốn 😊.

Hy vọng bài viết này sẽ giúp ích cho các bạn 🥴,chúc các bạn học tốt.

Hẹn gặp các bạn trong các bài viết tiếp theo!