Fri, 2015-01-23 19:32
hey guys ,
ok so was redaing a pritty nice article here :
and the guy talks about BFC(block formatting context).
and gives an example as follows :
HTML :
<div class="wrapper"> <p class="p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed blanditiis repellendus laborum repudiandae labore quisquam debitis tempore quae quod quia esse, voluptates rem excepturi at est suscipit rerum quidem consequatur. </p> <div class="em"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptatibus, nulla nesciunt unde facere quas eius maxime perspiciatis velit laudantium cumque, eum quia illo, nemo accusantium. Aliquam ipsa facere libero?</p> </div> </div>
CSS :
.wrapper{ padding: 2em; border: 1px dashed #000; } .p{ border: 3px solid pink; } .em{ background: #444; color: #fff; margin-top: 2em; }
and then the author says adding overflow:auto to the .wrapper , the margin-top on .em will not be effective anymore .
but i don't see that happening . can somebody explain , i am referring to the 1st example in the article .
Fri, 2015-01-23 20:31
#1
I assume you're talking about
I assume you're talking about margin collapse, correct?
First, block formatting context is not inherited, so .em p's default 1em top margin collapses with .em's 2em margin, which then collapses with the sibling p's 1em margin.
Since .wrapper does have a new block formatting context set, it contains both the first p's top margin and the bottom margin of .em collapsed with its child p's bottom margin.
Margin collapse has a lot of nuances which are easy to miss. At least you've missed the era of IE's buggy handling of it.
The new block formatting context is even more nuanced. Again, you've missed IE's gawd-awful version (hasLayout).
cheers,
gary
Fri, 2015-01-23 22:14
#2
well how do i achiev
well how do i achiev margin-collapse in this given example :
That is how do i make the .p and .em together .
something like what the author has acheived , check out the secound diagram :
i guess i have to apply
overflow:hidden;
somewhere , i just don't know where . i guess on the .wrapper ? but that does't seem to work .
Thanks Though for ur explanation .
Sat, 2015-01-24 09:55
#3
You're not clear, but I'll take a guess
You already have margin collapse. The <p> element's margin collapses through div.em. If you want to uncollapse the margins, set .em to {overflow:hidden;}.
g
Sat, 2015-01-24 15:19
#4
@gary
I'll try that . thanks .