The rem units in CSS

The units em are not always convenient. The problem is that if you change the font size of one tag, it will also change for all its descendant tags that calculate their size relative to it.

Therefore, the units rem were introduced. The values of these units are always calculated relative to the font size specified for the tag html.

As you already know, by default this value is 16px:

html {
	font-size: 16px;
}

Let's look at an example. Let's say we have tags like these:

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

Let's give them sizes in rem:

div {
	font-size: 2rem; /* corresponds to 32px */
}
p {
	font-size: 2rem; /* corresponds to 32px */
	margin: 2rem;    /* corresponds to 32px */
}

Let's say we have HTML code for which we will solve problems:

<main>
	<h1>header</h1>
	<section>
		<h2>header</h2>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</section>
	<section>
		<h2>header</h2>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</section>
</main>

Rewrite all units specified in pixels into rem:

main {
	margin: 64px auto 32px;
}

h1 {
	font-size: 32px;
}
section {
	font-size: 16px;
	margin-bottom: 32px;
}
h2 {
	font-size: 24px;
	margin-bottom: 32px;
}
p {
	font-size: 20px;
	margin-bottom: 12px;
}