如何删除正文周围的边距空间或清除默认的CSS样式

问题描述 投票:27回答:7

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

html css margin css-reset
7个回答
44
投票

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.css http://meyerweb.com/eric/tools/css/reset/ https://github.com/necolas/normalize.css/ http://html5doctor.com/html-5-reset-stylesheet/ ...


9
投票

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

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

3
投票

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

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

将其添加到您的CSS:

body { margin: 0; padding: 0; }

3
投票

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

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

2
投票

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

然而事实证明有一个简单的解决方案。您需要做的就是给HEADER标签一个1px的边框,以及将BODY MARGIN设置为零,如下所示。

body { margin:0px; }

header { border:1px black solid; }

如果您的HEADER中有任何H1,H2标签,您还需要将这些标签的MARGIN设置为零,这将消除可能出现的任何额外空间。

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


0
投票

跟着这个吧

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

0
投票

我遇到了同样的问题,我的第一个<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标签。

© www.soinside.com 2019 - 2024. All rights reserved.