CSS-də boşluqlar və em vahidləri

Tutaq ki, bizim aşağıdakı teqlər var:

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

Tutaq ki, abzas şriftinin ölçüsü px ilə verilib:

p {
	font-size: 20px;
}

Gəlin bu abzasın kənar boşluğunu em vahidləri ilə təyin edək. Bu halda, boşluq ölçüsü abzasın valideynindən deyil, öz şrift ölçüsündən hesablanacaq:

p {
	font-size: 20px;
	margin: 2em;  /* 40px-ə uyğundur */
}

Tutaq ki, indi abzaya ölçü em ilə verilib:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* 40px-ə uyğundur */
}

Gəlin yenidən elementimizə margin təyin edək. Bu halda, o hələ də elementin öz cari şrift dəyərindən hesablanacaq. Eyni zamanda, şrift dəyərinin özü valideynə nisbətən hesablanacaq:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* 40px-ə uyğundur */
	margin: 2em;    /* 80px-ə uyğundur */
}

Praktik Tapşırıqlar

Tutaq ki, bizim üçün məsələləri həll edəcəyimiz HTML kodu var:

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

Aşağıdakı kodu icra etmək nəticəsində div teqlərinin px ilə şrift ölçüsü və kənar boşluğunun nə qədər olacağını müəyyən edin:

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

Aşağıdakı kodu icra etmək nəticəsində div teqlərinin px ilə şrift ölçüsü və kənar boşluğunun nə qədər olacağını müəyyən edin:

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

Aşağıdakı kodu icra etmək nəticəsində div teqlərinin px ilə şrift ölçüsü və kənar boşluğunun nə qədər olacağını müəyyən edin:

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

Aşağıdakı kodu icra etmək nəticəsində p teqlərinin px ilə şrift ölçüsü və kənar boşluğunun nə qədər olacağını müəyyən edin:

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

Aşağıdakı kodu icra etmək nəticəsində p teqlərinin px ilə şrift ölçüsü və kənar boşluğunun nə qədər olacağını müəyyən edin:

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