Question

我的HTML / CSS技能很简单。

代码就像这样

HTML CODE：

<!DOCTYPE html>
<html lang="en">
  <head>

    <title> Margin Problem </title>
    <link href="doubt1.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div class = "page-header">
                Example Header 
    </div>
  </body>
</html>

CSS代码：

h1
{
    color:#FFFFFF ;
}
.page-header
{
    background:#9C27B0;
}

当我在chrome中运行它我的文本＆＃34;示例标题＆＃34;来自页面顶部的一些空白行后，当我检查元素时，默认情况下chrome webkit将margin设置为8px，我能找到减少它的方法吗？

Answer 1

所有浏览器（不仅仅是webkit）上的body标签都有一个默认的边距值，要重置只需使用：

body {
  margin: 0;
}

Answer 2

您可以将body margin更改为0，如下例所示：

＆＃13;

h1
{
    color:#FFFFFF ;
}
.page-header
{
    background:#9C27B0;
}
body {
  margin:0px;
}

＆＃13;

<div class = "page-header">
    Example Header 
</div>

＆＃13;

Answer 3

使用CSS重置。最简单的是：

* {
    margin: 0;
    padding: 0;
}

没有CSS重置的示例：http://jsfiddle.net/7c4hawr5/1/

CSS重置示例：http://jsfiddle.net/7c4hawr5/

您可以在此处找到更多广泛的CSS重置：http://www.cssreset.com

Answer 4

这些是CSS的一些有用规则：

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

    /* Optional, leaves zero whitespace when using display: inline-block; */
    font-size: 0px;
}

webkit中的保证金问题

4 个答案: