Random gap between div elements

Question

I have a random gap appearing between div elements and I can't seem to make it go away. Problem is shown https://i.stack.imgur.com/ehy22.png

Here is my related code

 <div id="menuBar"><!--Hosts menu options-->
 </div>
 <!-- end #menuBar -->
 <div id="content">
 <p>hello</p>
 </div>

and CSS

#menuBar{
    width:900px;
    height:80px;
    margin: 0 auto;
    background:url(images/g2w2g.png) repeat-y;
}
#content{
    width:900px;
    margin: 0 auto;
    padding-top:0;
    background:url(images/g2w2g.png) repeat-y;
}

Thanks guys

How much margin and padding do you have around your `
` tag? — Sumner Evans, Feb 19 '14 at 16:51

score 4 · Accepted Answer · answered Feb 19 '14 at 16:52

4

When you use the p element to begin a new paragraph in HTML, it automatically creates some space above and below the content.

Add

p {
    margin:0px;
    padding:0px;
}

EXAMPLE

answered Feb 19 '14 at 16:52

SaturnsEye

6,297
10
46
62

The only thing I didn't try setting the margin and padding to 0.. thank you! – Fonti Feb 19 '14 at 21:55
@Fonti No problem :) it's easy to miss the simple things – SaturnsEye Feb 20 '14 at 08:27

score 2 · Answer 2 · answered Feb 20 '14 at 08:56

2

If you add bottom:16px; into #content div that will fix the gap with a position:relative;

answered Feb 20 '14 at 08:56

ByronMcGrath

365
2
3
20

This works, but you would need to apply the same rule to each div that has `
` where as removing padding from `
` solves it on a whole
– SaturnsEye Feb 20 '14 at 09:01

score 0 · Answer 3 · answered Feb 19 '14 at 16:53

0

You can solve this adding display: inline-block; to your #content div.

Here's a Fiddle example for you

answered Feb 19 '14 at 16:53

ManelPNavarro

579
7
21

score 0 · Answer 4 · answered Feb 19 '14 at 16:53

0

Check the margin on the paragraph or add some padding to the content div. That might fix it.

answered Feb 19 '14 at 16:53

Jon Blumenfeld

39
2

Pattle · Answer 5 · 2014-02-20T09:31:36.103

Its because your p tag still has the default margin and padding placed on it by the browser. You should do

p {
    padding:0px;
    margin:0px;
}

You should also consider using a CSS reset. Every browser has its own default 'user agent' styles. By including a reset it sets all of these default styles to null which should avoid any inconsistencies across different browsers. One important thing to remember is to include your css reset styles before any other styles. For example

<link rel="stylesheet" type="text/css" href="reset.css" /><!-- CSS reset in here -->
<link rel="stylesheet" type="text/css" href="style.css" /><!-- Your styles in here -->

I reccomend you take a look at these two links CSS Reset Normalize.css

could you explain a bit more about CSS reset? never heard the term before — Fonti, Feb 19 '14 at 21:55

Random gap between div elements

5 Answers5