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

Question

我一直在用 HTML 实现网页，但遇到了一个奇怪的问题。

http://jsfiddle.net/SntpD/3/

#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 元素上的边距/填充。我更喜欢通配符方法，因为它可以防止以后使用其他浏览器默认设置出现相同的问题。