Random gap between elements or divs

Question

There is a weird gap appearing between the elements here. I would prefer to have them flush together. Any idea how to fix this?

LINK

Answer 1

It's because you haven't styled those elements which leave it up to the browser to decide. Chrome for instance decide to input margins on the p-element.

p { ...
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
... }

Use a css reset file and you will both fix this particular problem but problably many many similair situations in your future as a web developer.

Answer 2

That's because you haven't provided any css for the tags h1,p. So, browser is adding default margin bottom and top. So, add this to css -

p, h1 { margin: 0 }

Answer 3

It is a margin/padding issue as stated by others. What I suggest if you are just getting started and haven't developed any habits yet is to always include a reset.css file. This will get rid of all the browser defaults and allow you to start fresh.

Answer 4

fixes for inline elements are:

vertical-align:top;

or

vertical-align:middle;

display:block;

for images

Answer 5

I found my mysterious white spaces.

Don't do this:

echo "<div>
blah blah blah
</div>"

Instead:

echo "<div>"
          ."blah blah blah"
     ."</div>";

Just clean up your code of whitespaces.

Answer 6

I am not quite sure, as to which kind of /gap/ you are referring, but a simple CSS rule like margin:0; padding:0; might help you out.

Answer 7

It's a good idea to use a CSS reset file, like the one you can find on YUI: http://developer.yahoo.com/yui/reset/

If you do end up using the YUI CSS Reset, make sure you set your background color on the HTML tag as well since YUI's CSS Reset turns it white.

html {
   background:black;
}
body {
    margin: 0px;
    font-family: helvetica;
    background: black;
}