0

我一直在用 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) 之间的距离是多少吗？

4

3 回答 3

1

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

* { margin: 0; padding: 0 }

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

于 2013-05-03T18:39:00.780 回答
1

JSFiddle（和大多数浏览器）为<body>标签提供默认填充，即您看到的空白。放

body {
    padding: 0;
}

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

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

html, body {
    padding: 0;
    margin: 0;
}
于 2013-05-03T18:39:25.087 回答
1

默认填充是问题所在。大多数浏览器都有它，所以即使在 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/

于 2013-05-03T18:47:31.697 回答