Identation and em units in CSS

Let's say we have the following tags:

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

Let the paragraph font size be set to px:

p {
	font-size: 20px;
}

Let's set the margin of this paragraph to em units. This will make the indent size calculated from the paragraph's font size, not its parent's:

p {
	font-size: 20px;
	margin: 2em;  /* corresponds to 40px */
}

Now let's say the paragraph is set to a size of em:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* corresponds to 40px */
}

Let's set margin to our element again. In this case, it will still be calculated from the current font value of the element itself. At the same time, the font value itself will be calculated relative to the parent:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* corresponds to 40px */
	margin: 2em;    /* corresponds to 80px */
}

Practical tasks

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

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

Determine what font size and padding of px will be on the div tags as a result of running the following code:

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

Determine what font size and padding of px will be on the div tags as a result of running the following code:

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

Determine what font size and padding of px will be on the div tags as a result of running the following code:

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

Determine what font size and padding of px will be on the p tags as a result of running the following code:

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

Determine what font size and padding of px will be on the p tags as a result of running the following code:

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