inherited margin problem...

[MuGeN]

this has been something that has bugged me for a while... what is the best and slickest way to avoid this inherited margin problem?

basically, that table has a margin-bottom to push away and follow-on content by 20px... however, the containing div adopts this margin, and its not a one-off it happens with LOADS of stuff so i'm thinking there is a fundamental problem with the way i do such css...

here's an example:

http://www.myskinhq.com/salon-support/training/courses/ipl-treatments/

if you look in firebug you will see that that margin at the bottom is influenced by the 1em margin of the <p> tags... why the hell is this happening?

Any help on this little niggle much appreciated

 

[V4NT0M]

Not sure why it does it as I'm no CSS guru, but using padding-bottom:1em; for the <P> tag fixes the problem and looks the same.

 

[MuGeN]

padding isn't always a good solution when theres backgrounds etc involved, like on that table in the picture for example...

why on earth is the parent using the childs parameters, isn't that a bit backward?

 

[V4NT0M]

In what way is it not a good idea? Can you link me to the page padding would cause a problem on?

 

[MuGeN]

the only example i can find right now is in a page where you would need to be logged in and i can't give you the pass... but basically wherever there is a background, you need margin not padding (obviously they have different uses otherwise there wouldn't be two different parameters would there?)...

regardless, margin is the proper way to do something like that (p { margin: 0 0 1em; } is a very common way of doing things...) so why would that affect the container it is in?

 

[MuGeN]

Still got this problem guys, could really do with someone to cast an expert eye over the problem...

its as simple as this, and always happens to me:

if i have:

<div id="container>
  <div id="content"></div>
</div>

and gave #content a margin top of 20px, then the 20px above #content would be a gap, fine, but the background/borders/everything from #container won't be there either!

is this not a really common problem?

 

[MuGeN]

right, time to illustrate the point properly:

http://www.madversion.com/

have a peek in firebug... the margin-top: 20px of content is spilling over and spannering up container...

see? the red container should be flush with the top of the page, but it seems to adopt the 20px gap from something within itself how screwed up is that?

 

[swinnie]

Try this as your CSS instead.

	<style type="text/css" media="screen">
		html, body { margin: 0px; padding: 0px; }
		#container { width: 600px; margin: 0 auto; height: 600px; background-color: #ff0000; }
		#content { float: left; clear: both; width: 400px; height: 400px; margin-top: 20px; background-color: #ccc; }		
	</style>

You're trying to force the margins, without 'clearing' them of the container, this will force the margins to be placed on other elements as demonstrated.

 

[MuGeN]

interesting, but just adding a float seems like a hacky solution (i also found out that adding a border to #container sorted the problem...)

what if you don't want to float the element?