CSS-de boşluklar we em ölçeg birlikleri

Bizde aşakdaky tegler bar diýeliň:

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

Abzasyň şrift ölçegi px birliginde berlen diýeliň:

p {
	font-size: 20px;
}

Geliň bu abzasyň marginini em birliklerinde belleýäli. Bu ýagdaýda boşlugyň ölçegi abzasyň şrift ölçeginden hasaplanar, onuň eýesinden däl:

p {
	font-size: 20px;
	margin: 2em;  /* 40px gabat gelýär */
}

Indi abzasa em birliginde ölçeg berlen diýeliň:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* 40px gabat gelýär */
}

Geliň ýene margin elementimize bereliň. Bu ýagdaýda ol öňki ýaly elementiň öz şrift bahasyndan hasaplanar. Şol bir wagtda şrift bahasynyň özi eýe baglylykda hasaplanar:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* 40px gabat gelýär */
	margin: 2em;    /* 80px gabat gelýär */
}

Amaly meseleler

Bizde HTML kody bar, üçin meseleleri çözeris:

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

Aşakdaky kody ýerine ýetirip bolandan soň, div tegleri px birliginde haýsy şrift we boşluk ölçegine eýe bolar:

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

Aşakdaky kody ýerine ýetirip bolandan soň, div tegleri px birliginde haýsy şrift we boşluk ölçegine eýe bolar:

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

Aşakdaky kody ýerine ýetirip bolandan soň, div tegleri px birliginde haýsy şrift we boşluk ölçegine eýe bolar:

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

Aşakdaky kody ýerine ýetirip bolandan soň, p tegleri px birliginde haýsy şrift we boşluk ölçegine eýe bolar:

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

Aşakdaky kody ýerine ýetirip bolandan soň, p tegleri px birliginde haýsy şrift we boşluk ölçegine eýe bolar:

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