We help IT Professionals succeed at work.

Need to force margins to collapse

Rouchie
Rouchie asked
on
340 Views
Last Modified: 2008-03-06
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>
Comment
Watch Question

Top Expert 2007
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Top Expert 2007

Commented:
h1, p { margin: 0; }
CERTIFIED EXPERT

Author

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

Top Expert 2007
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Top Expert 2007

Commented:
>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.
Top Expert 2007

Commented:
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.
CERTIFIED EXPERT

Author

Commented:
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>
Top Expert 2007

Commented:

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;  }
CERTIFIED EXPERT

Author

Commented:
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 :-)
Top Expert 2007

Commented:
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; }
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.