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 () 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 () below!
Agree with a comment or answer? Like () to up-vote the contribution!
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.
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”!
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.
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.
On step #3: " Set the bottom margin in #blog .post to 7.5% ." Nothing changes, I tried with huge numbers and the result was always the same. Why do we edit the % if nothing happends?
I don’t really understand the explanation of why padding and margin are based on the width and not the height of their parent element, particularly the following scenario described in the lesson:
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.
My question is, why would the height of the parent element necessarily stretch to accommodate the child? Why wouldn’t the child element overflow out of the parent element, similar to would happen with the width?
And also, doesn’t the width of the parent element also constantly change when its padding and border-width are also changed as well (under the content-box box-model at least)? Meaning that the margin and padding of the child element are also based on a measurement that is constantly changing too?
I was also confused by this topic so I went and did a little digging. Things are still not entirely clear to me, but I think I cleared up a few of points.
For margins and padding to look consistent they should reference the same measurement, so width was chosen as the measurement to reference.
Since we read text generally from top to bottom, it makes more sense to fix the width because the height could be virtually infinite and we could still scroll.
The reason there is an infinite loop is if the vertical dimension of a parent element is unset it will stretch to fit it’s child. However, if you add padding-top: 10%; to the child element, then the parent expands to fit the now bigger child, which then means the padding-top: 10%; gets recalculated from the now expanded height and that results in an infinite loop as both dimensions keep expanding and getting recalculated.
The infinite loop they describe for vertical margins does also apply to horizontal margins, it just seems to be hard-coded in browsers (or at least Chrome) to prevent it.
This seems to be because the default width is whatever the browser window’s width is at a given time.
TL;DR: Percentages reference width because it is visually consistent and the default width is the width of the browser so it is defined by default
Hope that helps someone.
[edit: clarified why width is the default reference]
Can someone please confirm whether my understanding of points 2 and 4 from this activity is correct:
The top margin of the #blog .post container is set to 12.5%, meaning that it is set to 12.5% of the #blog parent container, which has a width of 86% of the width of the body. The width of the body is undefined, hence, the #blog element has a size of 86% of the browser window size.
The .images container is set to have a bottom margin of 20%, meaning that this margin is sized at 20% of the #blog container width. The #blog container, again, has a width of 86% of the browser window size.
When using relative sizing, ems and rems should be used to size text and dimensions on the page related to text size (i.e. padding around text). This creates a consistent layout based on text size. Otherwise, percentages should be used.
I’m not sure I agree with that. I use the rem unit throughout my whole web page when wanting it to resize based on user preferences. So if the user sets his browser font size to small, not only will the text on my web page get smaller, but my entire web page will get smaller
The box-sizing property controls how an element’s dimentions (height and width) are calculated. It cannot be set using percentages. It can only have one of the following values:
content-box (default)
border-box
When setting an element’s box-sizing property to content-box (which is the default value), its width and height will be calculated as the following: width = width property + horizontal padding + horizontal borders, height = height property + vertical padding + vertical borders
When setting an element’s box-sizing property to border-box, its width and height will be calculated as the following: width = width property, height = height property. The content area’s dimentions will not be set using the width and height properties. Instead, it will be as large as the remainging space. It’s dimentions will be calculated after applying the paddings and borders
No. If we don’t explicitly set an element’s property (E.g. width), the browser will give it a default value. By default, the <body> element’s width is set to the full width of the browser window. However, the rest of what you said is correct
If the width of a block-level element is not set, it will simply take up the whole width of the browser window (with some default margins). If the width of an inline element is not set, it will simply take up the required space of its child elements. Finally, inline elements don’t have modifiable dimensions.
So, there isn’t a big difference between calculating the margins/paddings relative to the width or the height with an inline-block element with unset dimensions
) below.
) to up-vote the contribution!
