Question

我只是将一个标题导航栏添加到一个html页面。但问题是它与顶部没有完全对齐。浏览器和导航栏之间有一个小的差距。我找到了一个解决方案，设置边距：0;，但我遇到的问题是，只有通过选择整个div来编码它才会起作用...比如

*{ margin:0;}

为什么会这样？

我在另一个stackoverflow问题中找到了这个解决方案，但是我不能发表评论并且因为我的回复率很低。他因为SASS而说明了它。但是我的代码如何成为sass因为我使用了正常的CSS编码简单程序。 / p>

链接的灵魂问题。（请在正确选择的问题中查看评论） Header not touching top of screen

我的代码：

<html>
  <head>
    <style>

      * {
        margin:0;
      }

      .new {
        width:100%;
        background-color: blue;
      }
    </style>
  </head>
  <body> 
    <div class="new">New Website</div>
  </body>
</html>

Answer 1

不要将margin: 0;放在div上。把它放在body或html标签上。像这样：

body{
  margin: 0;
}

不要忘记你也可以设计html和body标签的样式！将它们height: 100%;放在未来可能会有用。

Answer 2

某些浏览器已将用户代理样式表设置为“body”标记

对于Chrome：正文有保证金：8;在body标签上，所以你会在navbar之间得到一个小的差距。

您可以设置

inf a f = a : [ f x | x <- inf a f ]

将解决您的问题。

http://jsbin.com/luqoruqewa/edit?html,output

Answer 3

*是通用选择器。它针对所有元素。当你声明：

* {margin: 0}

您正在从页面上的每个元素中删除边距。这适用于这种情况，但它会产生您可能不希望在具有更多内容的页面上产生的副作用。

您的浏览器正在向body元素添加一些填充。正如amoyer指出的那样，将身体边缘设置为零，你应该没事。

标题＆＃39; div＆＃39; div没有完全对齐到屏幕的顶部（简单但令人沮丧）

3 个答案: