• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 328
  • Last Modified:

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>
0
Rouchie
Asked:
Rouchie
  • 4
  • 3
  • 3
2 Solutions
 
TNameCommented:
Hi, you could simply declare two classes and assign them to the corresponding elements, e.g.:

.first { margin-top:0; padding-top:2px; }
.last { margin-bottom:0; padding-bottom:2px;}


 <div class="content">
           <h1 class="first">Header 1 margin causes gap above!</h1>
           <h2>Header 2</h2>
           <h3>Header 3</h3>
           <p class="last">Paragraph margin causes gap below!</p>
</div>
0
 
R7AFCommented:
h1, p { margin: 0; }
0
 
RouchieAuthor Commented:
Thanks for your responses.  Your answers have confirmed that the cause of the error is as I thought.

0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
R7AFCommented:
I wouldn't do this:

.first { margin-top:0; padding-top:2px; }
.last { margin-bottom:0; padding-bottom:2px;}

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.
0
 
TNameCommented:
>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.
0
 
R7AFCommented:
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.
0
 
RouchieAuthor 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>
0
 
TNameCommented:

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;  }
0
 
RouchieAuthor 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 :-)
0
 
R7AFCommented:
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; }
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now