Unit Trong CSS, các đơn vị (units) được sử dụng để đo và xác định kích thước, khoảng cách và các giá trị khác trong các thuộc tính CSS. Có nhiều loại đơn vị khác nhau có thể được sử dụng, ví dụ như pixel (px), phần trăm (%), em (em), rem (root em), và nhiều đơn vị khác.
Dưới đây là một số ví dụ về cách sử dụng các đơn vị trong CSS:
- Pixel (px): Đây là đơn vị tuyệt đối, thường được sử dụng để xác định kích thước cụ thể.
css
.container {
width: 300px;
height: 200px;
padding: 10px;
font-size: 16px;
}
- Phần trăm (%): Đơn vị này thường được sử dụng để thiết lập kích thước hoặc khoảng cách dựa trên một phần trăm của phần tử cha.
css
.sidebar {
width: 25%;
padding: 5% 10%;
}
- Em (em): Đơn vị này thường được sử dụng để thiết lập kích thước dựa trên kích thước của phông chữ hiện tại.
css
.paragraph {
font-size: 1.2em;
line-height: 1.5em;
}
- Rem (root em): Tương tự như em, nhưng được tính dựa trên kích thước phông chữ của phần tử gốc (thường là thẻ
<html>).
css
.heading {
font-size: 2rem;
margin-bottom: 1.5rem;
}
- Viewport Units: Đơn vị này liên quan đến kích thước của cửa sổ trình duyệt.
css
.hero {
height: 100vh; /* 100% chiều cao của viewport */
padding: 5vw; /* 5% chiều rộng của viewport */
}
Các đơn vị này giúp bạn kiểm soát kích thước và khoảng cách trong CSS dễ dàng hơn, tùy theo yêu cầu thiết kế của trang web của bạn.