CSS में em के उपयोग की प्रथाएं

आइए HTML पेज का पूरा कोड देखें:

<html>
	<head>
		<title></title>
	</head>
	<body>
		<main>
			<div>
				<p>
					text
				</p>
			</div>
		</main>
	</body>
<html>

डिफ़ॉल्ट रूप से, पेज के सभी टैग्स का एक निश्चित फ़ॉन्ट आकार होता है। असल में बात यह है, कि html टैग का डिफ़ॉल्ट रूप से एक निश्चित फ़ॉन्ट आकार होता है:

html {
	font-size: 16px; /* डिफ़ॉल्ट मान */
}

इसलिए हम पेज के टैग्स के आकार em में निर्दिष्ट कर सकते हैं। ऐसा करने पर वे अपने आकारों की गणना सीधे माता-पिता के सापेक्ष करेंगे।

आइए, उदाहरण के लिए, main टैग का फ़ॉन्ट आकार निर्दिष्ट करें:

main {
	font-size: 1.5em; /* 24px के संगत */
}

और अब div टैग का फ़ॉन्ट आकार निर्दिष्ट करें:

div {
	font-size: 2em; /* 48px के संगत */
}

मान लीजिए कि हमारे पास HTML कोड है, जिसके लिए हम समस्याओं का समाधान करेंगे:

<main>
	<h1>header</h1>
	<div>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</div>
	<div>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</div>
</main>

नीचे दी गई सभी समस्याओं में, पिक्सेल में दिए गए सभी मानों को em में फिर से लिखें:

main {
	margin: 16px auto;
}

h1 {
	font-size: 32px;
}
p {
	font-size: 32px;
}

main {
	margin: 32px auto;
}

h1 {
	font-size: 32px;
}
div {
	font-size: 16px;
	margin-bottom: 32px;
}
p {
	font-size: 20px;
}