PDA

View Full Version : <p> causing a top margin in its <div>?



dsgn
Oct 15th, 2008, 09:04 PM
Here's the problem I have. I have a paragraph <p> (which has a left and top margin) in my <div> and its causing the div to be pushed down a bit, as if its applying the margin to the div rather than to the <p> which I have specified or something. I don't know what to do!

index.htm (just going to show whats necessary)

<div id="content">
<div id="box">
<p>My Text</p>
</div>
</div>

style.css (just going to show whats necessary)

#box {
margin: 0;
width: 665px;
height: 251px;
background-color: orange;
}
#box p {
width: 590px;
line-height: 13px;
margin-left: 40px;
margin-top: 40px;
}

Heres a pic:

http://img381.imageshack.us/img381/6702/probvi0.jpg

BoldUlysses
Oct 15th, 2008, 09:19 PM
At the risk of oversimplifying things, isn't what you're after padding and not a margin?


#box p {
width: 590px;
line-height: 13px;
margin-left: 40px;
padding-top: 40px;
}

dsgn
Oct 15th, 2008, 09:31 PM
Thanks for the help.

Less of a gap between the div's now and the text has padding. Still a gap though. But only does it in Firefox and Opera, theres no gap in IE6 or IE7:

http://img511.imageshack.us/img511/2783/prob2iy2.jpg

BoldUlysses
Oct 15th, 2008, 09:47 PM
Have you applied the universal reset to the beginning of your CSS?


* {
margin:0px;
padding:0px;
}

Can't do more without seeing the CSS and HTML in full.

Doctor_Varney
Oct 15th, 2008, 09:54 PM
Hello. Frustrating, I know...

Have you tried dispensing with the div (id="box") and merely inserting your text into ="content"?

I appreciate, that for all I know, you may have some special formatting rule intended at some point, for the contents of ="box", but you can use .classes to apply special formatting to various <spans> of text, within the ="content" in general, or even the ="wrapper"as a whole. Otherwise, our work starts to fall victim to the variance of browser margin/padding display foibles. Annoying, I know, but if your goal is to generate code in as staightforward, semantic and simple a manner as it can be, using the least amount of code to achieve your aims, then your work starts to embody the elegance, for which CSS is supposed to be famous. I have found that things got easier, when I started using #divs for fixed framework and <spans> for areas of text, within said framework of #divs.

No idea if this is helpful, although I hope it is.

Of course, as msufern suggests, the global reset, if not already applied, might do the trick.

Regards,

Doctor V

VIPStephan
Oct 15th, 2008, 10:08 PM
Why hasn’t anybody posted a link to an article explaining why this is actually happening? That makes it easier to solve such a simple issue.

Here you go: http://complexspiral.com/publications/uncollapsing-margins/

dsgn
Oct 15th, 2008, 10:08 PM
Hmm, the padding on the <p> helped and I set margin: 0; on #content, #wrapper, #header etc, that seemed to do the trick!

Thanks to all who helped.

Doctor_Varney
Oct 15th, 2008, 10:21 PM
Sorry. Double post. Something playing up. Just ignore this.

Doctor_Varney
Oct 15th, 2008, 10:53 PM
Why hasnít anybody posted a link to an article explaining why this is actually happening? That makes it easier to solve such a simple issue.

Here you go: http://complexspiral.com/publications/uncollapsing-margins/

Because we don't know of any...?

Many thanks for posting, by the way. I found it useful! :D