CSS'te Girintiler ve em Birimleri

Aşağıdaki etiketlere sahip olduğumuzu varsayalım:

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

Paragraf yazı tipi boyutunun px cinsinden ayarlandığını varsayalım:

p {
	font-size: 20px;
}

Bu paragrafın kenar boşluğunu em birimlerinde ayarlayalım. Bu durumda girinti boyutu, ebeveyninin yazı tipi boyutundan değil, paragrafın yazı tipi boyutundan hesaplanacaktır:

p {
	font-size: 20px;
	margin: 2em;  /* 40px'e karşılık gelir */
}

Şimdi paragrafın boyutunun em cinsinden ayarlandığını varsayalım:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* 40px'e karşılık gelir */
}

Öğemize tekrar margin ayarlayalım. Bu durumda, yine öğenin kendi mevcut yazı tipi değerinden hesaplanacaktır. Bu arada yazı tipi değerinin kendisi ebeveyne göre hesaplanacaktır:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* 40px'e karşılık gelir */
	margin: 2em;    /* 80px'e karşılık gelir */
}

Pratik Görevler

Görevleri çözeceğimiz aşağıdaki HTML kodu olduğunu varsayalım:

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

Aşağıdaki kodu çalıştırmanın sonucunda div etiketlerinin px cinsinden yazı tipi boyutu ve kenar boşluğu ne olur?

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

Aşağıdaki kodu çalıştırmanın sonucunda div etiketlerinin px cinsinden yazı tipi boyutu ve kenar boşluğu ne olur?

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

Aşağıdaki kodu çalıştırmanın sonucunda div etiketlerinin px cinsinden yazı tipi boyutu ve kenar boşluğu ne olur?

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

Aşağıdaki kodu çalıştırmanın sonucunda p etiketlerinin px cinsinden yazı tipi boyutu ve kenar boşluğu ne olur?

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

Aşağıdaki kodu çalıştırmanın sonucunda p etiketlerinin px cinsinden yazı tipi boyutu ve kenar boşluğu ne olur?

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