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.