सीएसएस में इंडेंटेशन और ईएम यूनिट्स

मान लीजिए कि हमारे पास निम्नलिखित टैग हैं:

<div>
	<p>
		text
	</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>
			text
		</p>
	</div>
</section>

निर्धारित करें कि div टैग का फ़ॉन्ट आकार और मार्जिन px में निम्नलिखित कोड निष्पादित करने के परिणामस्वरूप क्या होगा:

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

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

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

निर्धारित करें कि p टैग का फ़ॉन्ट आकार और मार्जिन px में निम्नलिखित कोड निष्पादित करने के परिणामस्वरूप क्या होगा:

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

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