Question

我研究过，这是一个常见的错误，但没有一个建议的修复有帮助。 http://i.imgur.com/MkDLROb.jpg

HTML

<div id="banner">
        <h1>Paslaugos</h1>
</div>

CSS

#banner {
width: 100%;
height: 240px;
background-image: url('img/paslaugos_bg.png');
background-position: center;
display: block;
margin-left:auto;
margin-right:auto;
}


h1 {
font-family: Helvetica;
font-weight: 100;
padding-top: 80px;
line-height: 130px;
letter-spacing: 5px;
font-size: 60px;
color: rgb( 255, 255, 255 );
text-transform: uppercase;
text-align: left;
text-shadow: 0px 2px 4px rgb( 3, 3, 3 );
width: 1200px;
margin-left:auto;
margin-right:auto;

}

有什么想法吗？即使我删除整个css或添加clear：两者

，空格也会出现

Answer 1

边距来自浏览器自动提供这些元素的CSS样式。它被称为用户代理样式。你必须覆盖这些默认值。在你的情况下，#banner h1 { margin: 0 auto;}应该这样做。

请查看Codes & Notes: Default browser styles and normalize了解有关该主题的更多信息。

Answer 2

你应该reset your css。原因是不同的浏览器有一些不同的默认css规则，它们适用于元素。

Answer 3

有些浏览器为不同的元素提供边距和填充的预设值，这些值可能因浏览器而异，为了摆脱这种情况，你应该重置它们，在这种情况下，添加下面的代码到你的h1 CSS：

margin:0px; padding:0px;

此外，您添加了这个填充，80px，如果您不需要它也可以删除它。

Answer 4

这可能会有所帮助：

h1 {
  position: absolute;
  padding-left: 0px;
}

h1在firefox中在页面顶部添加空间

4 个答案: