Html 如何删除正文周围的空白或清除默认css样式_Html_Css_Margin_Css Reset

Html 如何删除正文周围的空白或清除默认css样式

html css

Html 如何删除正文周围的空白或清除默认css样式,html,css,margin,css-reset,Html,Css,Margin,Css Reset,我承认我是一个初学者，但在发布这篇文章之前，我也做了大量的搜索。我的div元素周围似乎有额外的空间。我还想指出，我尝试了很多组合的边界：0，填充：0等，但似乎没有任何东西可以摆脱空白代码如下： <html> <head> <style type="text/css"> #header_div { background: #0A62AA; height: 64px;

我承认我是一个初学者，但在发布这篇文章之前，我也做了大量的搜索。我的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>


#标题室{
背景：#0A62AA；
高度：64px；
最小宽度：500px；
} 
#vipcentral_徽标{浮动：左；边距：0；}
#英特尔标志{浮点：右；边距：0；}

这就是它的样子（我插入了红色箭头以明确地调用额外的空间）：

我希望蓝色直接与浏览器边缘和工具栏相邻。这两幅图像的高度均为64像素，背景颜色与分配给#header_div的图像相同。请提供任何信息。

尝试在CSS中添加以下内容：

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

body { margin: 0; padding: 0; }

这是

body

元素的默认边距/填充

有些浏览器有一个默认的边距，有些浏览器有一个默认的填充，这两种浏览器都在body元素中作为填充应用

将此添加到CSS中：

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

body { margin: 0; padding: 0; }

正文

具有默认页边距：

或者您可以使用这个有用的全局重置

如果您想要的不是全局的，而是：

其他一些CSS重置：

…

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

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

我发现即使将主体边距设置为零，此问题仍然存在

然而，事实证明有一个简单的解决办法。你所需要做的就是给你的标题标签一个1px的边框，并将正文边距设置为零，如下所示

body { margin:0px; }

header { border:1px black solid; }

如果标题中有任何H1、H2标记，则还需要将这些标记的边距设置为零，这将消除可能出现的任何额外空间

不知道为什么会这样，但我用的是Chrome浏览器。显然，您也可以更改边框的颜色以匹配标题的颜色。

按照此操作

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

我也遇到了同样的问题，我的第一个

元素位于页面顶部，并且有一个浏览器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标记。

使用Google Chrome或Firefox web developer插件检查您的元素，查看应用于它的样式。它可能是页面的页眉或html元素的边距或填充。查找空间来源的一个简单提示是为每个元素设置不同的背景颜色。以及使用工具检查元素…感谢大家的帮助！我首先尝试了这个“全垒打”解决方案，效果很好。问题解决了！谢谢你，我知道要过一会儿。这比公认的答案更适合我

<!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>