Բացատներ և em միավորները CSS-ում

Ենթադրենք՝ ունենք հետևյալ թեգերը.

<div>
	<p>
		տեքստ
	</p>
</div>

Ենթադրենք՝ պարագրաֆի տառաչափը սահմանված է px.

p {
	font-size: 20px;
}

Եկեք սահմանենք այս պարագրաֆի մարջինը em միավորներով: Այս դեպքում բացատի չափը կհաշվարկվի պարագրաֆի տառաչափից, և ոչ թե նրա ծնողից.

p {
	font-size: 20px;
	margin: 2em;  /* համապատասխանում է 40px-ին */
}

Ենթադրենք՝ այժմ պարագրաֆին տրված է չափ em.

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* համապատասխանում է 40px-ին */
}

Եկեք նորից սահմանենք margin մեր տարրի համար: Այս դեպքում այն կշարունակի հաշվարկվել տարրի սեփական տառաչափի ընթացիկ արժեքից: Մինչդեռ տառաչափի արժեքն ինքնին կհաշվարկվի ծնողի նկատմամբ.

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* համապատասխանում է 40px-ին */
	margin: 2em;    /* համապատասխանում է 80px-ին */
}

Գործնական առաջադրանքներ

Ենթադրենք՝ ունենք HTML կոդ, որի համար մենք կլուծենք առաջադրանքներ.

<section>
	<div>
		<p>
			տեքստ
		</p>
	</div>
</section>

Որոշեք, թե ինչ տառաչափ և բացատ px-ով կունենան div թեգերը հետևյալ կոդի կատարման արդյունքում.

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

Որոշեք, թե ինչ տառաչափ և բացատ px-ով կունենան div թեգերը հետևյալ կոդի կատարման արդյունքում.

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

Որոշեք, թե ինչ տառաչափ և բացատ px-ով կունենան div թեգերը հետևյալ կոդի կատարման արդյունքում.

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

Որոշեք, թե ինչ տառաչափ և բացատ px-ով կունենան p թեգերը արդյունքում հետևյալ կոդի կատարման.

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

Որոշեք, թե ինչ տառաչափ և բացատ px-ով կունենան p թեգերը արդյունքում հետևյալ կոդի կատարման.

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