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" /> </div>
</div><!-- end #header -->
<div id="main_menu">
<p>Here goes the main menu</p>
<div class="clear_both" /> </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_开发者_JAVA百科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
Unexplainable DIV space
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.
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
JSFiddle : HERE
In top of your CSS file just paste this
* { margin: 0; padding: 0; }
Hope this helps.
<div class="clear_both" /> </div>
This is creating you a white space between Heading 1 and Here goes the main menu...
DIVs comes one below other if you have them "display: block", so even if this div don't have text, it has empty space " "...
If you delete this, all other will be like text below...
Sorry if I understand something wrong... ;)
div {line-height: 1.4em;} should be the culprit.
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.
Div comes with blank spaces whenever used. In order to remove them
Use
margin-top: -10px
or whatever is convenient to your page setup.
加载中,请稍侯......
精彩评论