Question

我正在创建一个网站，我已经在页面顶部放置了一个图像。虽然我已将上边距设置为0，但图像未附加到顶部。图像从顶部向下出现约5px。我的HTML和CSS代码

<div id="maindiv">
<div id="header">


</div> <!-- header div -->
    <nav class='navigation main-navigation'>
        <ul class='menu main-menu'>
            <li class='menu-item'>
                <a class='three-d' href='/'>
                    <span title='Home'>Home</span>
                </a>
            </li>
          </ul>

我的css代码

#maindiv {
width: 900px;       
margin: 0px auto;     
background: #fff url(banner.jpg) no-repeat;

}

#header {height:200px}

你可以看到图像顶部有一些空间。我希望图像位于页面顶部。

http://i.stack.imgur.com/VEwLF.jpg

Answer 1

这种情况正在发生，因为Chrome本身会向<body>元素应用8px的边距。

将以下css插入代码将解决问题：

html, body{
margin:0;
}

要使图像居中，请将以下内容添加到#maindiv css样式：

background-position:top center;

请参阅JSFIDDLE演示

Answer 2

只需将其添加到您的代码中：

#maindiv {
width: 900px;       
margin: 0px auto;     
background: #fff url(banner.jpg) no-repeat; 
position:fixed; // or position:relative;
top:0;     
}

#header {height:200px}

Answer 3

将此添加到您的css文件中

*{margin:0 auto; padding:0px;}

它将删除所有默认边距和填充

无法将图像放在页面顶部

3 个答案: