Khoảng cách và đơn vị em trong CSS

Giả sử chúng ta có các thẻ sau:

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

Giả sử kích thước font của đoạn văn được đặt bằng px:

p {
	font-size: 20px;
}

Hãy đặt margin của đoạn văn này bằng đơn vị em. Trong trường hợp này, kích thước khoảng cách sẽ được tính từ kích thước font của đoạn văn, chứ không phải từ phần tử cha của nó:

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

Giả sử bây giờ đoạn văn được đặt kích thước bằng em:

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

Hãy đặt margin cho phần tử của chúng ta một lần nữa. Trong trường hợp này, nó vẫn sẽ được tính toán dựa trên giá trị font hiện tại của chính phần tử. Trong khi đó, giá trị font sẽ được tính toán tương đối so với phần tử cha:

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

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

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

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

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

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

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

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

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

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

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

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

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

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