html - Normalize CSS w/local Stylesheet does not appear correct -
i have been doing web design little on year now, still have strange things happen on front end sometimes. creating simple template personal use using following code:
<!doctype html> <html> <head> <title>matt's template</title> <!-- stylesheets --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" /> <link rel="stylesheet" href="css/general.css" type="text/css" /> </head> <body> <section class="container"> <h1>matt's template</h1> </section> <!-- javascript libraries --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script> <!-- javscript --> </body> </html>
if view code in chrome browser, appears body shifted 15px down html tag. however, css explicitly tells html , body tags have no padding or margin. why there space?? has happened before , not sure how solved it. there must obvious answer. here css too.
html, body { height:100%; width:100%; padding:0; margin:0; } .container { height:100%; width:960px; position:relative; margin:0 auto; padding:0; background:#e0e0e0; }
the problem <h1>
still has default margin, have taken off default <body>
margin of 8px, not other elements have default ua styles. should using reset can 'start scratch' each element.
Comments
Post a Comment