[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 325
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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