Kế thừa và đơn vị em trong CSS

Bây giờ giả sử chúng ta có một mức lồng nhau sâu hơn:

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

Giả sử thẻ main có kích thước font chữ sau:

main {
	font-size: 10px;
}

Đặt kích thước font chữ cho thẻ div bằng em:

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

Đoạn văn cũng được đặt kích thước font chữ bằng em. Trong trường hợp này, nó sẽ tính kích thước của mình dựa trên kích thước font chữ đã được tính toán của div:

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

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

Giả sử chúng ta có mã HTML, và chúng ta sẽ giải các bài tập cho nó:

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

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

section {
	font-size: 10px;
}
div {
	font-size: 2em;
}

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

section {
	font-size: 10px;
}
div {
	font-size: 2em;
}
p {
	font-size: 1.5em;
}

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

section {
	font-size: 40px;
}
div {
	font-size: 0.5em;
}
p {
	font-size: 0.5em;
}