1

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

7 Answers 7

7

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 }
2

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.

2

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.

1

fixes for inline elements are:

vertical-align:top;

or

vertical-align:middle;

display:block;

for images

1
  • In my case This one helps! Thank you! Feb 6, 2015 at 23:24
1

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.

0

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.

0

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.