Welcome to the MacNN Forums.

Ver de Terre · Aug 24, 2003, 01:08 PM

When placing paragraphs (or other text elements) in divs, I'm getting extra space at the top and bottom from the default margins on the paragraph tag. It doesn't seem to be entirely consistent, though; in the following example, the first div has the desired behavior, while the second has extra space:

[php]<html>

<head>
<style type="text/css">

</style>
</head>

<body>

<div class="example1">
<p>this is a test</p>
</div>
<div class="example2">
<p>this is a test</p>
</div>

</body>

</html>[/php]

The only difference in the code, of course, is the border property, but why should changing this affect the margin property on the paragraph? It seems not to happen only with the border property, but I haven't been able to figure out what triggers it, as below:

<div class="example1" style="background: #ccc;">
<p>this is a test</p>
</div>
<div class="example2" style="background: #ccc; border: 1px solid;">
<p>this is a test</p>
</div>

I'm sure others have encountered this issue, so I would ask, are there any elegant work-arounds to the problem? Changing the margin properties of the paragraph and heading tags seems a bit of a hack.

Synotic · Aug 24, 2003, 10:30 PM

Originally posted by Ver de Terre:
When placing paragraphs (or other text elements) in divs, I'm getting extra space at the top and bottom from the default margins on the paragraph tag. It doesn't seem to be entirely consistent, though; in the following example, the first div has the desired behavior, while the second has extra space:

[php]<html>

<head>
<style type="text/css">

</style>
</head>

<body>

<div class="example1">
<p>this is a test</p>
</div>
<div class="example2">
<p>this is a test</p>
</div>

</body>

</html>[/php]

The only difference in the code, of course, is the border property, but why should changing this affect the margin property on the paragraph? It seems not to happen only with the border property, but I haven't been able to figure out what triggers it, as below:

<div class="example1" style="background: #ccc;">
<p>this is a test</p>
</div>
<div class="example2" style="background: #ccc; border: 1px solid;">
<p>this is a test</p>
</div>

I'm sure others have encountered this issue, so I would ask, are there any elegant work-arounds to the problem? Changing the margin properties of the paragraph and heading tags seems a bit of a hack.

Apparently within this thread both have the extra margin. I may be wrong but it's possible that adding a border is giving the div a height which allows it to add margins. But that could be way off. The solution is indeed to turn off the margins... Because well they are supposed to be there.

Also if there is only 1 example2/example1 item on your page they should be using ids:

div#example

<div id="example">

If you provided some more info on what you're actually trying to do perhaps I/we can help. Do you have a content div in which you have paragraphs? But the content div has its own padding and the margins of the paragraphs are adding too much space at the bottom of the content div?

If so, I usually turn off the top margins of the paragraphs and then double the bottom margins. Then I turn off the bottom padding of the content div. So if you want 14px between each div and 14px paddings on the content then it should work.

Of course this is a pretty specialized instance... but it could help

Ver de Terre · 01:17 AM

Yes, it does indeed seem like the extra space should be there--I imagine the real question is why it isn't there in some cases. I suppose it's more of an academic question than anything.

But tell me if the following doesn't strike you as slightly odd:

<table width="200" cellpadding="0" border="1" bgcolor="#cccccc">
<tr><td><div><p>test</p></div></td></tr>
</table>

<table width="200" cellpadding="0" border="1" bgcolor="#cccccc">
<tr><td><div style="border: 1px solid;"><p>test</p></div></td></tr>
</table>

<table width="200" cellpadding="0" border="1" bgcolor="#cccccc">
<tr><td><div style="border: 1px solid;"><p style="margin: 0;">test</p><div></td></tr>
</table>

[php]<table width="200" cellpadding="0" border="1" bgcolor="#cccccc">
<tr><td><div><p>test</p></div></td></tr>
</table>

<table width="200" cellpadding="0" border="1" bgcolor="#cccccc">
<tr><td><div style="border: 1px solid;"><p>test</p></div></td></tr>
</table>

<table width="200" cellpadding="0" border="1" bgcolor="#cccccc">
<tr><td><div style="border: 1px solid;"><p style="margin: 0;">test</p><div></td></tr>
</table>[/php]

Not likely a realistic situation; it just seems to me as a bit curious.

Oh--and I wouldn't want the web gurus around here to think I didn't know how to use the id parameter--don't worry; it wasn't intended for public consumption!

<span style="color: red;">Edit: I see IE is playing different tricks on me now. There's only extra space at the bottom, and even without the border. Okay. Perhaps this one should be chalked up to browser misimplementation?</span>