我当然是一个初学者,但在发布此内容之前,我也进行了大量搜索。我的div元素周围似乎有多余的空间。我还想指出的是,我尝试了很多border组合:0,padding:0等,似乎没有什么可以摆脱空白的。
这是代码:
<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>
这是它的样子(我插入了红色箭头以明确地指出多余的空间):
我期望蓝色直接与浏览器边缘和工具栏邻接。这些图像都正好是64像素高,并且背景色与分配给#header_div的背景色相同。任何信息将不胜感激。
body has default margins
body
body { margin:0; } /* Remove body margins */
或者您可以使用此有用的全局重置
* { margin:0; padding:0; box-sizing:border-box; }
如果您想要的东西不那么* 全球性:
*
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; }