我当然是一个初学者,但在发布此内容之前,我也进行了大量搜索。我的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的背景颜色相同。任何信息将不胜感激。

评论

使用Google Chrome或Firefox Web开发人员附加组件检查您的元素,以查看对其应用了哪些样式。它可能是页面的页头或html元素的空白或空白。

找出空间的来源的一个简单技巧是为每个元素将背景色设置为不同的颜色。以及使用工具来检查元素...

#1 楼

body具有默认边距:http://www.w3.org/TR/CSS2/sample.html

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;
}


其他CSS重置:

http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.csshttp://meyerweb.com/eric/tools/css/reset/https://github.com/necolas /normalize.css/http://html5doctor.com/html-5-reset-stylesheet/


评论


感谢大家的帮助!我首先尝试将其作为“本垒打”解决方案,但效果很好。问题解决了!

–安东尼
2012年3月3日16:00

#2 楼

尝试从body标签中删除填充/边距。

body{
padding:0px;
margin:0px;
}


评论


谢谢你,我知道要过一会儿。这对我来说比接受的答案更好

– redeagle47
15年8月7日在15:17

#3 楼

尝试在CSS中投放以下内容:

body, html{
    padding:0;
    margin:0;
}


#4 楼

这是body元素的默认边距/填充。

某些浏览器具有默认边距,一些浏览器具有默认填充,并且两者都用作body元素中的填充。

将此添加到您的CSS:

body { margin: 0; padding: 0; }


#5 楼

我发现即使将BODY MARGIN设置为零,该问题仍然存在。

但是事实证明,这很容易解决。您要做的就是为HEADER标签设置1px的边框,并将BODY MARGIN设置为零,如下所示。

body { margin:0px; }

header { border:1px black solid; }


如果您有H1, H2,您在HEADER中的标签,您还需要将这些标签的MARGIN设置为零,这将消除可能显示的任何多余空间。

不确定为什么这样做,但是我使用Chrome浏览器。显然,您也可以更改边框的颜色以匹配标题颜色。

#6 楼

与此搭配

body {
    padding:0px;
    margin:0px;
}


#7 楼

我遇到了同样的问题,并且我的第一个<p>元素位于页面顶部,并且还具有浏览器Webkit默认边距。这使我的整个div下降,其效果与您所讨论的相同,因此请注意页面顶部的所有基于文本的元素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body style="margin:0;">
      <div id="image" style="background: url(pixabay-cleaning-kids-720.jpg) 
no-repeat; width: 100%; background-size: 100%;height:100vh">
<p>Text in Paragraph</p>
      </div>
    </div>
  </body>
</html>


所以只记得检查所有的子元素,而不仅仅是html和body标签。