asked on

Need to force margins to collapse

In the following page, you can see I have 3 sections to a page - top, content, and bottom.

Each containing DIV has it's margins set to 0, so that they should fit together. The problem however is that the margins of the headers/paragraph inside the 'content' div is pushing the div's apart and causing an unsightly gap.

Can anyone enlighten me on how to stop this occurring? I know I can manually set the margin of the first/last object inside the DIV to 0, but that's going to be awkward across multiple pages.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
      <title>CSS Test</title>
      <style type="text/css">
            body {background-color:#dddddd;}
            div.outer {width:788px; padding:0; margin:1em auto 0 auto;}
            div.top {margin:0; padding:0; height:16px; overflow:hidden; background-color:white;}
            div.content {margin:0; padding:0 20px 0 20px; background-color:white;}
            div.bottom {margin:0; padding:0; height:35px; background-color:white;}
      </style>
</head>
<body>
<div class="outer">
            <div class="top">
                  Header Text
            </div>
            <div class="content">
                  <h1>Header 1 margin causes gap above!</h1>
                  <h2>Header 2</h2>
                  <h3>Header 3</h3>
                  <p>Paragraph margin causes gap below!</p>
            </div>
            <div class="bottom">
                  <p>Footer message</p>
            </div>
</div>
</body>
</html>

ASKER CERTIFIED SOLUTION

TName

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

R7AF

h1, p { margin: 0; }

Rouchie

ASKER

Thanks for your responses. Your answers have confirmed that the cause of the error is as I thought.

SOLUTION

R7AF

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

TName

>You can better apply the padding to div.outer. That is easier because it doesn't require to apply a first-class to the first element etc.
The padding was just an example, as the author's orginal post suggested that he can test/adjust values by himself ;)
I had/have no idea if he wants 2px padding there or not.

The idea was just to set the margins for the first and last elements only by class. Assigning margins to h1 and p is ok on a page that is exactly like this one, but, as we were told about a large number of pages and not knowing if the elements - or the order of the elements - inside "content" will always be *exactly* the same, classes that can be applied on any kind of tag seem more flexible to me.

R7AF

Yes but your suggestion requires that you add class=first and class=last to the first and last element. That means you're making it more complicated than necessary. What if the content is generated by users with a Wysiwyg editor. I bet they won't add those class names.

That was what I was trying to say, whether the question asker needs it or not. I was just suggesting a more general and easier solution.

Rouchie

ASKER

Hi R7AF

If I simply added margin:0 to paragraphs and headings, wouldn't I then have the problem of manually increasing the margins when multiple objects were inside the content div (to stop them sticking together)?

i.e.
<div class="content">
<p>Paragraph 01</p>
<p>Paragraph 02</p>
<p>Paragraph 03</p>
</div>

TName

BTW, you can close the gaps between the divs also by simply assigning all divs a border
div { border:1px solid #fff; }
or by specifying overflow:hidden for all divs:
div { overflow:hidden; }

Rouchie

ASKER

Hi TName

Yes I did know about this. The problem was that the div's will each have their own background image to create the appearance of a floating object above the background image. Because of that the border trick wouldn't work.

Thanks for sticking with this issue :-)

R7AF

You asked how to remove the gap. I gave a solution, but in general you don't want to remove all whitespace. What I do is replace it with padding.

div.content p { padding: 3px 0; }

This is just how you like it. If there are objects like images that are too close, you can apply padding or margin to them:

div.content img { padding: 2px; }