CSS-ში მემკვიდრეობა და em ერთეულები

დავუშვათ, ახლა გვაქვს უფრო ღრმა ჩადგმა:

<main>
	<div>
		<p>
			ტექსტი
		</p>
	</div>
</main>

დავუშვათ, main თეგს აქვს შემდეგი ზომა შრიფტის:

main {
	font-size: 10px;
}

div თეგს დავაყენოთ ზომა შრიფტის em-ში:

div {
	font-size: 2em; /* შეესაბამება 20px-ს */
}

აბზაცსაც დავაყენოთ ზომა შრიფტის em-ში. ამ შემთხვევაში ის თვლის თავის ზომას div-ის უკვე გამოთვლილი შრიფტის ზომის მიმართ:

p {
	font-size: 2em; /* შეესაბამება 40px-ს */
}

პრაქტიკული ამოცანები

დავუშვათ გვაქვს HTML კოდი, რისთვისაც ჩვენ ვხსნით ამოცანებს:

<section>
	<div>
		<p>
			ტექსტი
		</p>
	</div>
</section>

განსაზღვრეთ, რა ზომის შრიფტი px-ში ექნებათ div-ებს შემდეგი კოდის შესრულების შედეგად:

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

განსაზღვრეთ, რა ზომის შრიფტი px-ში ექნებათ აბზაცებს შემდეგი კოდის შესრულების შედეგად:

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

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