如何删除身体周围的空白空间或清除默认的CSS样式
我确实是一个初学者,但是在发布之前我也做了大量的search工作。 我的div元素似乎有额外的空间。 我也想指出,我尝试了很多边界的组合:0,填充: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
有默认页边距: http : //www.w3.org/TR/CSS2/sample.html
body { margin:0; } /* Remove body margins */
或者你可以使用这个有用的全局重置
* { margin:0; padding:0; box-sizing:border-box; }
如果你想要比全球更less的东西,
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; }
其他一些CSS重置 :
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/
…
尝试删除身体标记的填充/边距。
body{ padding:0px; margin:0px; }
这是body
元素的默认边距/填充。
一些浏览器有一个默认的边距,一些默认的填充,并且都在body元素中用作填充。
添加到您的CSS:
body { margin: 0; padding: 0; }
尝试在CSS中广告以下内容:
body, html{ padding:0; margin:0; }
即使将BODY MARGIN设置为零,我仍然发现这个问题仍然存在。
但事实certificate,这是一个简单的解决办法。 所有你需要做的是给你的头标签一个1px边框,以及设置BODY MARGIN为零,如下所示。
body { margin:0px; } header { border:1px black solid; }
如果您的HEADER中有任何H1,H2标签,则还需要将这些标签的MARGIN设置为零,这将消除可能出现的任何额外空间。
不知道为什么这个工程,但我使用Chrome浏览器。 显然你也可以改变边框的颜色来匹配你的页眉颜色。
去这个
body { padding:0px; margin:0px; }