Reputation: 351

How to remove an invisible space between div tags

I have built several web sites and now i am having newbie problem that is driving me nuts...

Here's my code:

<body>
<div id="page">
<div id="page_wrapper">

    <div id="header">
        <h1>Heading 1</h1>
    <div class="clear_both" />&nbsp;</div>
    </div><!-- end #header --> 

    <div id="main_menu">
        <p>Here goes the main menu</p>
    <div class="clear_both" />&nbsp;</div>
    </div><!-- end #main_menu --> 

    <div id="left">
    </div><!-- end #left -->

And here's my CSS

First i have a CSS Reset template from here: http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css

and then on another file:

body, html {
    font: 10pt Verdana,Arial,sans-serif;
    background: #fff;
    margin: 0;
    padding: 0;
    text-align: left;
    color: #333;
}
div {
    line-height: 1.4em;
}
#page {

}
#page_wrapper {

}
#main_menu {

}
#left {

}
div.clear_both {
    margin: 0;
    padding: 0;
    font-size: 0;
    height: 0;
    line-height: 0;
    clear: both;
}

And on the link below there is an image screenshot on which you can see the output... (i am working on a local server)

There is an unexplainable space between the div tags I CANT REMOVE IT and it is driving me nuts... please can someone tell me how to remove it? I have tryed adding a negative top margin but from my previous experience it is not a solution... usualy seting the margin and the padding to 0 was enough... somehow now it is diferent :S

enter image description here

Unexplainable DIV space

Upvotes: 10

Answers (7)

nirvanastack

Reputation: 463

Div comes with blank spaces whenever used. In order to remove them

Use

margin-top: -10px

or whatever is convenient to your page setup.

Upvotes: 0

j.rmz87

Reputation: 793

on your DIV or image use:

.div
{
display: inline-block;
padding:0;
margin:0;
}

and on body use:

body
{
padding:0;
margin:0;
}

I had the same problem and this worked just fine for me I just got it fixed! Hope this helps anyone searching for an answer.

Upvotes: 0

Martin Taleski

Reputation: 211

In top of your CSS file just paste this

* { margin: 0; padding: 0; }

Hope this helps.

Upvotes: 4

Spirit

Reputation: 351

I've finaly found the problem thanks to all of You but especialy thanks to Notepad++

The problem was caused by the invisible blank spaces (from the SPACE key). I don't know why, but according to my knowlege this is the first time multiple space strokes to be detected by the browser.. I guess the newer browsers now are registerng more then one blank space after another.

I just opened the html scripts with Notepad++ and set from View->Show Simbol->Show All Characters. Then i've deleted all of the unneccessery empty spaces and that solved my problem.

Upvotes: 12

clairesuzy

Reputation: 27624

div {line-height: 1;}
h1, p {margin: 0;}

don't use units for your line height, see: Unitless line-heights for more information,

if you simply put 1.4 then the line height will be 1.4 x the font-size, this should help you get control of your gaps, obviously my code example above absolutely zero's everything and is just an example