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

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包含它的字段集.