Giới thiệu về đơn vị em trong CSS

Đơn vị em cho phép đặt kích thước font chữ theo phần trăm so với kích thước của phần tử cha. Hãy cùng xem ví dụ.

Giả sử chúng ta có các thẻ lồng nhau như sau:

<div>
	<p>
		text
	</p>
</div>

Hãy đặt kích thước font chữ cho div của chúng ta:

div {
	font-size: 20px;
}

Và đặt cho đoạn văn kích thước là 2em. Giá trị này tương ứng với font chữ lớn gấp hai lần kích thước font chữ của phần tử cha:

p {
	font-size: 2em; /* tương ứng 40px */
}

Bây giờ hãy đặt cho đoạn văn kích thước là 0.5em. Giá trị này tương ứng với một nửa kích thước font chữ của phần tử cha:

p {
	font-size: 0.5em; /* tương ứng 10px */
}

Giá trị 1em sẽ làm cho font chữ của đoạn văn bằng với font chữ của div cha:

p {
	font-size: 1em; /* tương ứng 20px */
}

Bài tập thực hành

Giả sử chúng ta có mã HTML sau, mà chúng ta sẽ sử dụng để giải các bài tập:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Xác định kích thước font chữ tính bằng px mà các thẻ li sẽ có sau khi thực thi mã sau:

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

Xác định kích thước font chữ tính bằng px mà các thẻ li sẽ có sau khi thực thi mã sau:

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

Xác định kích thước font chữ tính bằng px mà các thẻ li sẽ có sau khi thực thi mã sau:

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}