CSS-ში em ერთეულების შესავალი

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

დავუშვათ, გვაქვს შემდეგი ჩადგმული ტეგები:

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

მოდით დავაყენოთ ფონტის ზომა ჩვენს div-ს:

div {
	font-size: 20px;
}

ხოლო პარაგრაფისთვის დავაყენოთ ზომა 2em-ში. ეს მნიშვნელობა შეესაბამება ფონტის ზომას, რომელიც ორჯერ აღემატება მშობელი ელემენტის ფონტის ზომას:

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

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

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

1em მნიშვნელობა პარაგრაფის ფონტს ისეთივეს გახდის, როგორიც მშობელი div-ისაა:

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

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

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

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

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

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}