1em tương đương với bao nhiêu pixel

1em tương đương với bao nhiêu pixel

Khi quy định độ lớn phông chữ cho trang sử dụng CSS mình thấy một số lập trình viên sử dụng đơn vị là em thay vì pixel:

body {
    font-size: 1.5em;
}

Như vậy thì một đơn vị em trong CSS sẽ tương đương với bao nhiêu đơn vị pixel?

    Guest

    - 1970/01/01 Trả lời

    Theo định nghĩa thì:

     Giá trị của đơn vị "em" được đo dựa trên độ rộng của chữ in hoa M

    Điều này có nghĩa là giá trị của em sẽ phụ thuộc vào độ lớn của font-size của trang. Nếu trong CSS bạn để độ lớn của phông là 16px bằng đoạn code sau:

    body {
        font-size: 16px;
    }

    Thì khi đó 1em sẽ tương đương với 16px. Nói chung không có mối liên hệ trực tiếp nào giữa em và pixel thay vào đó mối quan hệ giữa hai đơn vị này phụ thuộc gián tiếp vào độ lớn của phông chữ trên trang.

    Guest

    - 1970/01/01 Trả lời

    • em = relative to parent
    • rem = relative to root

    Có nghĩa là:

    body  (font-size=14px)
      div (font-size=1.2rem = 14*1.2 = 16.8px) <- relative to root (html/body)
        p (font-size=1em = 1.2rem = 16.8px) <- 1rem = 1 parent = 1.2rem)

10 bình luận