Menu
I am admittedly a beginner, but I also did a fair amount of searching before posting this. There seems to be extra space around my div element. I also would like to point out that I tried many combinations of border: 0, padding:0, etc. and nothing seemed to get rid of the white space.
Here is the code:
<html> <head> <style type="text/css"> #header_div { background: #0A62AA; height: 64px; min-width: 500px; } #vipcentral_logo { float:left; margin: 0 0 0 0; } #intel_logo { float:right; margin: 0 0 0 0; } </style> </head> <body> <div id="header_div"> <img src="header_logo.png" id="vipcentral_logo"> <img src="intel_logo.png" id="intel_logo"/> </div> </body> This is what it looks like (I inserted red arrows to explicitly call out the extra space):
I was expecting the blue color to abut directly to the browser edges and toolbar. The images are both exactly 64 pixels tall and have the same background color as the one assigned to #header_div. Any information would be greatly appreciated.
644
All you need to do is give your HEADER tag a 1px border, aswell as setting the BODY MARGIN to zero, as shown below. You may also need to change the MARGIN to zero for any H1, H2, etc. elements you have within your HEADER div. This will get rid of any extra space which may show around the text.
style-test-1. This spacing exists because of the default margin of the body element. Because of this, we can remove the spacing by setting the margin of the body element to 0. This is done in the style-test-2. html page.
body has by default 8px margins: http://www.w3.org/TR/CSS2/sample.html
body { margin: 0; /* Remove body margins */ } Or you could use this useful Global reset
* { margin: 0; padding: 0; box-sizing:border-box; } If you want something less * global than:
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } some other CSS Reset:
http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/
…
175
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
