Question

我一直在用HTML编写网页，我遇到了一个奇怪的问题。

#menuh
    {
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    float:left;
    font-family:arial, tahoma;
    text-align:left;
    padding-left:12%;
    background:#c1188d;
    }

我在这里看不到任何应该在左侧引入白边的东西。

下拉菜单中的洋红色腰带应该严格对齐左（在我看来），但事实并非如此。（左侧应该是它的右边是右边缘。）

有人能告诉我浏览器边缘和洋红色div（#menuh）之间的距离是多少？

Answer 1

许多浏览器都有默认样式。在我的情况下（Chrome / Mac），body元素的上限为8px。您可以使用以下规则（将其放在css的顶部）默认情况下删除元素上的所有边距/填充：

* { margin: 0; padding: 0 }

或者您可以删除body元素上的边距/填充。我更喜欢通配符方法，因为它可以防止以后出现其他浏览器默认值时出现同样的问题。

Answer 2

JSFiddle（和大多数浏览器）为<body>标记提供默认填充，这是您看到的空白区域。设置

body {
    padding: 0;
}

你的问题就消失了。 JSFiddle中的填充（至少对我来说是Chrome / Win8）是8px。

要捕获所有情况（浏览器具有不同的默认样式），对<body>和<html>应用0填充和边距：

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

Answer 3

默认填充是个问题。大多数浏览器都有它，所以即使在jsfiddle之外，你也可能会遇到它。

最好的办法是使用CSS重置样式表。为您将在网页中使用的大多数元素创建正确的填充和边距重置。以下是一些例子：

http://yuilibrary.com/yui/docs/cssreset/
http://meyerweb.com/eric/tools/css/reset/
http://www.cssreset.com/
http://html5reset.org/
http://necolas.github.io/normalize.css/

填充/边距的原因是什么？

3 个答案: