4 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 52 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

hey guys ,

ok so was redaing a pritty nice article here :

Article

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 .

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 52 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

well how do i achiev

well how do i achiev margin-collapse in this given example :

fiddle

That is how do i make the .p and .em together .

something like what the author has acheived , check out the secound diagram :

article

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 .

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 52 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

@gary

I'll try that . thanks .