Geek Answers Handbook

CSS - white space between my HTML and BODY

I am trying to use HTML5 Boilerplate + Normalize.css for my current project, and I ran into the following problem.

There seems to be a gap between my HTML tag and the BODY tag. I tried to find out what was the reason for this, but failed after many attempts.

I must have missed something here or there.

<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Ridanis | Web Design &amp; Web Development</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> </head> <body> <!--[if lt IE 7]> <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> <![endif]--> <!-- Wrapper / Start --> <div class="wrapper"> <h1>Hello World!</h1> </div> <!-- Wrapper / End --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script> <script src="js/main.js"></script> </body> </html>

Here is the fiddle: http://jsfiddle.net/C7gbC/

Thanks in advance.

+4
source share
2 answers

normalize.css introduces a default margin declaration for h1 elements based on the browser defaults:

 h1 { font-size: 2em; margin: 0.67em 0; }

If you zero it out manually (either in the main stylesheet, or by modifying normalize.css directly), the space will disappear:

 h1 { margin: 0; }
+9
source

Found that this is my problem with "h2" in the title of my page. The same goes for the p tag in both iE8 and Crome. Just set the field value: 0; for my "h1" and "p" tags for some structure styles that I set at the beginning of my main.css page. The solution seems to work

0
source

More articles:


All Articles