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;
}