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-top
of a block from themargin-top
of one or more of its descendant blocks; or no border, padding, inline content,height
, ormin-height
to separate themargin-bottom
of a block from themargin-bottom
of 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.
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
overflow
to create a new BFC is that theoverflow
property 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 usedoverflow
for 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.