FAQ: Sizing Elements - Percentages: Padding & Margin

This community-built FAQ covers the “Percentages: Padding & Margin” exercise from the lesson “Sizing Elements”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn Responsive Design

FAQs on the exercise Percentages: Padding & Margin

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

When percentages are used to set padding and margin, they are calculated based only on the width of the parent element, because of a possible unset height for the parent container.

But what if the width is not set?

1 Like

Maybe it’s just me, but this explanation doesn’t really make sense. Would altering a child’s width not affect a parent’s width as well, causing the same update cycle? How is width different from height? Or is it that, in general, height varies a lot more than width so width is usually the more reliable option?

Vertical padding and margin are also calculated based on the width of the parent. Why? Consider the following scenario:

A container div is defined, but its height is not set (meaning it’s flat).
The container then has a child element added within. The child element does have a set height. This causes the height of its parent container to stretch to that height.
The child element requires a change, and its height is modified. This causes the parent container’s height to also stretch to the new height. This cycle occurs endlessly whenever the child element’s height is changed!

In the scenario above, an unset height (the parent’s) results in a constantly changing height due to changes to the child element. This is why vertical padding and margin are based on the width of the parent, and not the height.

Why in this exercise when we set margin-top and margin-bottom in percentages for “#blog .post” selector nothing has changed! Even browser DevTools shows that calculated margin is “0”!

UPD: I found a topic about that %-margin/padding for flex elements are some sort of deprecated: https://stackoverflow.com/questions/36783190/why-doesnt-percentage-padding-margin-work-on-flex-items-in-firefox-and-edge

Vertical padding and margin are also calculated based on the width of the parent. Why? Consider the following scenario:

  1. A container div is defined, but its height is not set (meaning it’s flat).
  2. The container then has a child element added within. The child element does have a set height. This causes the height of its parent container to stretch to that height.
  3. The child element requires a change, and its height is modified. This causes the parent container’s height to also stretch to the new height. This cycle occurs endlessly whenever the child element’s height is changed!

In the scenario above, an unset height (the parent’s) results in a constantly changing height due to changes to the child element. This is why vertical padding and margin are based on the width of the parent, and not the height.

I’ve read this multiple times and I don’t understand it.

Why does the child element require a change?
Why does this cycle occur endlessly?
Why is this not the case with width?

The thing confusing me is that we are setting the top margin of #blog .post to 1.5% and the bottom margin to %7.5 but the parent element (which I assume is #blog) has no defined width. So what are these percentages based on??

The element #blog is set to a width of 86%. The element #blog .post is set to a width of 52% (of its parent element, #blog). As the browser window is resized the browser will try to keep the top margin at 1.5% and the bottom margin at 7.5% based on the height of the parent element (#blog). The lesson mentions several scenarios why it is not desirable for these vertical margins to be based on the height of the parent.

I’m new to this as well, that being said I think I have my head wrapped around this and maybe can shed a little light on this at least until a more experienced mind can jump in and correct me.
Q: Why does the child element require a change?
A: I believe this is worded poorly in the lesson, I think it means “If” the child element requires a change the parent will stretch to a new height to contain it.
Q: Why does this cycle occur endlessly?
A: Again I believe this worded poorly and really should read can occur endlessly.
Q: Why does this not occur with width?
A: Now I’m just going out on a limb a little bit here like I said I’m fairly new to this as well. Vertical scrolling on a page is pretty much expected so the container stretches because it will only cause vertical scrolling which is common and excepted. The width, on the other hand, will overflow the parent because horizontal scrolling is not really acceptable and really breaks the flow of the page.
Again I probably worded it badly myself, hope this helps.