why overflow property with value hidden works in this step?
here the link for the challenge: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-the-css-box-model-by-building-a-rothko-painting/step-22
You can achieve the same effect by using display: flow-root.
You can think of the padding on the container as giving the inner box something to push against. The same would happen if you added a border on the container
border: 0.1px solid transparent;
If you remove the padding on the .frame it may help to better see what is happening. Although it might still seem like unexpected behavior.
It is technically margin collapse, although we usually think of that as affecting adjacent sibling element, it also affect child/parent.
MDN: Mastering margin collapsing
No content separating parent and descendants
If there is no border, padding, inline part, block formatting context created, or clearance to separate the
margin-topof a block from themargin-topof one or more of its descendant blocks; or no border, padding, inline content,height, ormin-heightto separate themargin-bottomof a block from themargin-bottomof one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
I’d say you are more likely to see box-sizing: border-box used on the container (or all elements) and then keeping the padding on the container. Margin is most often used to create space between sibling elements and not space from the parent container.
2 Likes
To make sure i understand, the overflow property makes a BFC, which i guess we can see if we have a huge text in a small container, the text breaks out by default, but doesn’t effect the outside/surrounding elements. If anything it would overlay them if it has to.
And the new BFC is there so it can add scroll bars when desired correct?
I assume content from two different BFC’s cant “mingle” very well.
But what are your thoughts about this step in the course, should the lesson have explained it a little more about the margins?
Had to do a lot of external seeking to figure out what was going on and why the magical padding and overflow saved the day.
Btw, that MDN link about master margin collapsing, is it me or did it not show how to “master” anything.
It mentioned what it was, what causes it but not so much how to deal with it or prevent it to much.
The overflow property just happens to create a new BFC. It’s a technical detail that can be used, but its main function isn’t that. It deals with overflow and how to handle it. It is sort of like how opacity creates a new stacking context. You don’t use opacity for that, but it still happens.
The problem with using
overflowto create a new BFC is that theoverflowproperty is meant for telling the browser how you want to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a BFC. In addition, it is potentially not readable for a future developer, as it might not be obvious why you usedoverflowfor this purpose. If you useoverflow, it is a good idea to comment the code to explain.
It is more common to see overflow used with floats than to avoid margin collapse.
For child/parent margin collapse we most often use padding on the parent (most parent containers will have some padding).
For child/child margin collapse we simply write the margins with the collapse in mind. For example, there is no reason to give the same top and bottom margin to two sibling elements, so we just use a top or a bottom margin for each. Or we just ignore the collapse with the understanding of why the two neighboring margins won’t double the margin spacing between the elements (the largest of the two is used).
The default browser styles for margin create margin collapse, for example, the default margin on the p element creates margin collapse.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.