Question

当我使用inspect元素时，正文从页面顶部开始100px，即使css中没有边距或类似内容。如果从页面中删除<nav>元素，一切正常（即使从css中删除margin-top规则，它也可以正常工作 - 但仍然存在一些差距）。

导航器不应该一直在顶部，但是当添加margin-top时，它会推动h1，地址和站点下面的其余部分......这非常令人困惑。我正在努力实现这一目标：http://imgur.com/zgBFm

有人可以理解这个吗？

HTML：

<div id="wrapper">
  <header>
    <h1><a href="index.html" title="Ozio Sushi">Ozio Sushi</a></h1>
    <address>
    123.456.7890<br>
    123 Fake Street West, Toronto
    </address>
    <nav>
      <ul>
        <li><a href="about.html" title="About">About</a> </li>
        <li> <a href="menu.html" title="Menu">Menu</a></li>
        <li> <a href="gallery.html" title="Gallery">Gallery</a></li>
        <li> <a href="contact.html" title="Contact">Contact</a></li>
      </ul>
    </nav>
  </header>
</div>

CSS：

@charset "UTF-8";
/* CSS Document */


body { 
margin: 0px;
padding: 0px;
background-color: #362f2d;
}
a {
    text-decoration: none;
    color:inherit;
    border: none;
}
#wrapper {
    background-color: #362f2d;
    width: 100%;
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 0px;
}
header {
    clear: both;
    width: 100%;
    display: block;
}
nav { 
height: 50px;
width: 100%;
background-color: #f7941d;
margin-top: 100px;
}
header h1 {
    font-family: Kaushan script, cursive;
    color: white;
    float:left;
    font-size: 60pt;
    font-weight: 300;
    margin:0px;
}
address {
    font-family: Lato, Arial, sans-serif;
    color: white;
    font-weight:300;
    font-size: 8pt;
    float:left;
    font-style: normal;
}

li {
display: inline;
margin-right: 60px;
font-family: Lato, Arial, sans-serif;
color: white;
font-size: 16pt;
font-weight: 400;
}
#main {
    clear:both;
    margin:0px;
}

Answer 1

将margin-top上的nav和导航中的ul设置为0：

http://jsfiddle.net/MbrJf/3/

边距将推动身体向下，ul具有必须取消的默认边距（您应该使用重置或标准化CSS文件）

修改

然后你想要这样的东西：http://jsfiddle.net/MbrJf/4/？这种情况下的根本问题是，header未正确包含徽标h1，因为它是float。应用其中一个标准解决方案（如clearfix或overflow:hidden）将会解决此问题。

奇怪的html5 / css行为

1 个答案: