Question

我的页面在页面顶部有这个额外的填充，我无法删除。在阳光下尝试了一切，希望有人能指引我。

有什么想法吗？

Answer 1

WebKit样式表包含以下内容： 'margin'和'padding'属性：

-webkit-margin-before:
-webkit-margin-end:
-webkit-margin-after:
-webkit-margin-start:

-webkit-padding-before:
-webkit-padding-end:
-webkit-padding-after:
-webkit-padding-start:

享受

Answer 2

您的页面顶部附近有一个元素，顶部边距延伸到页面包装器之外。如果你有这个：

<div class="wrapper" style="margin: 0">
  <div class="section" style="margin: 40px 0"> Stuff! </div>
</div>

然后.section元素将位于.wrapper的顶部，其40px边距将延伸到顶部。这与边距一起折叠的方式有关，因此元素之间的两个边距不会累积。您可以通过在包装器上添加overflow: hidden来防止这种情况。

在您的标记中，.mini-search元素具有40px的上边距。删除此边距，或在包含它的字段集上添加overflow: hidden。

Answer 3

使用此css代码：

/*Reset Safari User Agent Styles*/
* {-webkit-padding-start: 0px;}

您评论的问题是因为用户代理样式，我了解它使用浏览器工具检查body标签。您应该使用它提供的工具（现在所有重要的包括DOM检查器）来跟踪导航器上的元素样式，这样您就可以揭开非标准行为的神秘面纱。

我知道你不要求它，但谈论WebKit的东西，我粘贴代码获取除了IE之外，每个浏览器都有圆形边框。

.rounded
{
-moz-border-radius:5px; /*works on Firefox */
-webkit-border-radius:5px; /*works on Safari and Google Chrome*/
border-bottom-radius: 5px; /*works on Opera*/
}

Answer 4

我相信你已经完成了：

body {padding :0; margin:0}

默认情况下，body标签有填充。

Answer 5

在我看来，是由在HTML开始标记之后添加的某个插件添加的EMBED元素* （选中“右键单击＆gt;检查元素”）看它是否真的存在）。如果是，基本上有两种选择：

禁用/删除插件，负责添加元素; （首选，因为它是全球性的）
将embed{display:none}插入您的样式表。

*这是我的情况 - 该插件名为默认插件，同时禁用＆amp;删除有助于解决问题。

Answer 6

我可以通过删除规则来修复它：

* { padding: 0 }

从你的CSS。我不确定那是什么打破，但这就是原因。

Answer 7

始终包含YUI重置css文件。

和： body, html {padding: 0; margin:0}就是这样！

Answer 8

这适用于IE（在我的测试中至少是IE v10）：

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

底部是适用于IE 10的那个，只是将所有尺寸保持为你设置选择器/元素的宽度和/或高度。

Answer 9

我的导航设备有一个带有填充并包含按钮的问题。 Overflow:hidden确实有效，但它也会关闭按钮，因为它们有一个越过导航高度边界的填充。所以我尝试了overflow:visible，这对我来说很好。

Chrome / Safari / Webkit上的额外填充 - 任何想法？

9 个答案: