Thực hành sử dụng em trong CSS

Hãy xem mã HTML đầy đủ của trang:

html<html>
  <head>
    <title></title>
  </head>
  <body>
    <main>
      <div>
        <p>
          text
        </p>
      </div>
    </main>
  </body>
<html>

Theo mặc định, tất cả các thẻ trên trang đều có kích thước phông chữ nhất định. Thực tế là, thẻ html theo mặc định có một kích thước phông chữ nhất định:

csshtml {
  font-size: 16px; /* giá trị mặc định */
}

Vì vậy chúng ta có thể chỉ định kích thước cho các thẻ trên trang bằng em. Khi đó, chúng sẽ tính toán kích thước của mình dựa trên phần tử cha trực tiếp.

Ví dụ, hãy chỉ định kích thước phông chữ cho thẻ main:

cssmain {
  font-size: 1.5em; /* tương ứng với 24px */
}

Và bây giờ hãy chỉ định kích thước phông chữ cho thẻ div:

cssdiv {
  font-size: 2em; /* tương ứng với 48px */
}

html<main>
  <h1>header</h1>
  <div>
    <p>
      text
    </p>
    <p>
      text
    </p>
  </div>
  <div>
    <p>
      text
    </p>
    <p>
      text
    </p>
  </div>
</main>

cssmain {
  margin: 16px auto;
}

h1 {
  font-size: 32px;
}
p {
  font-size: 32px;
}

cssmain {
  margin: 32px auto;
}

h1 {
  font-size: 32px;
}
div {
  font-size: 16px;
  margin-bottom: 32px;
}
p {
  font-size: 20px;
}