Đơn vị đo trong CSS

Đơn vị đo trong CSS bao gồm các đơn vị tuyệt đối như inch, centimet, point, v.v ... cũng như các đơn vị đo tương đối như phần trăm và đơn vị em. Bạn cần những giá trị này để chỉ định các đơn vị đo khác nhau trong CSS, ví dụ border = "1px solid red" .

Bảng dưới đây liệt kê tất cả các đơn vị đo lường CSS cùng với các ví dụ:

Đơn vị px

Pixel (px) là đơn vị đo lường được sử dụng phổ biến nhất vì nó được coi là cơ sở đo lường cho nhiều đơn vị khác và có nhiều tiêu chuẩn trong thiết kế website dựa trên pixel. 

.box{ height:150px; width:150px; }

Phần tử .box trong ví dụ trên có height và width đều bằng 150px và nó sẽ giữ nguyên trên tất cả các kích thước màn hình.

Chú ý: kích thước mặc định của một trang web là 16px

Đơn vị %

Một đơn vị phổ biến không kém đó chính là đơn vị phần trăm (%) nó là một đơn vị tương đổi và liên quan tới thẻ cha bọc nó.

.parent{ width: 500px; } .child{ width: 50%; }

Ở đây ta có .child là con của .parent, và khi ta xét width: 50%; thì lúc đó width của thẻ con sẽ bằng 250px đúng bằng 1/2 width của thẻ cha.

Chú ý: đơn vị % thường được sử dụng với width và height của thẻ

Đơn vị em

Đơn vị em là một đơn vị tương đối rất hay được sử dụng, nó phụ thuộc vào kích thước phông chữ (font-size) của phần tử cha.

Nếu một thẻ cha có font-size: 18px; thì 1em sẽ bằng 18px  đối với tất cả các con của nó.

.parent{ font-size: 18px; } .child{ margin: 1em; /* 1em = 18px */ }

Điều này rất có lợi trong việc khi chúng ta muốn thay đổi font-size, padding, margin của mỗi phần tử con, bạn chỉ cần thay đổi font-size của thẻ cha vậy là tất cả phần tử con sẽ tự động điều chỉnh sao cho phù hợp (điều mà px không thể làm được).

Đơn vị rem

Đơn vị rem cũng giống với đơn vị em chỉ khác mỗi rem phụ thuộc vào font-size của phần tử gốc (thẻ html)

html{ font-size: 20px; } .parent{ font-size: 18px; } .child{ margin: 1rem; /* 1rem = 20px */ font-size:1.5rem; /* 1.5rem = 30px */ }

Rem có một chút lợi thế so với em, thay vì đi chỉnh từng font-size (nếu có) của các thẻ cha thì đổi với rem chỉ duy nhất chỉnh font-size của html

Trên đây là bài viết của eLib.VN về đơn vị đo trong CSS. Đây là những đơn vị phổ biến nhất trong CSS vì đơn giản là nó hỗ trợ rất tốt trong phần thiết kế layout trong CSS, ngoài ra còn có rất nhiều các đơn vị hay ho và thú vị trong CSS nữa mà chúng ta nên biết. Mình sẽ có bài nói về điều này. Hi vọng các bạn cảm thấy thích thú và giữ mãi đam mê lập trình.