Question

到目前为止，我的每个CSS练习都遇到了问题，我身体标签内的第一个元素，无论是img还是h1，都只是停留在页面的左上角（body标签开始的位置），我认为，无论边距大小或元素宽度如何，都无法以任何方式移动它。我甚至尝试添加一个背景颜色，只是为了看它是否会起作用而它没有，所以我想由于某些原因，不能对这个元素进行修改。

这是我的HTML

 <body>
    <header class="Top">
        <img src="img/logo.png" alt="NeoDance Logo" width="356" height="48" class="logo">

        <nav class="NavBar">
            <a href="" class="links">Home</a>
            <a href="" class="links">About</a>
            <a href="" class="links">Class schedules</a>
            <a href="" class="links">Performances</a>
            <a href="" class="links">Blog</a>
            <a href="" class="links">Contact</a>

        </nav>
        <div class="ClearFix"></div>

    </header>

这是我的CSS。请注意，在此显示行之前，我使用的是完全未经编辑的Meyer css重置版本

    header.Top{
    width: 1440px;
    margin: auto;
    background-color: #303030;
    overflow: hidden

}

div.wrapper

img.Logo{



    margin-top: 35px;
    margin-bottom: 35px;
    margin-left: 250px;
    margin: auto;
    background-color: #303030;



}

    nav.NavBar{
    float: right;
    width: 490px;
    background-color: #303030;
    list-style: none;
    margin: auto;
    margin-right: 250px

}

a.links{
    float: right;
    font-size: 15pt;
    font-family: 'Muli', sans-serif;
    color: #8c8c8c;
    margin-top: 50px;
    margin-right: 18px;
}

div.container 1{
    width: 490px;
    clear: both
}

img.dancers{
    float: right;
}

div.ClearFix{
    clear: both;
}

img.logo应该应用了边距，如css中所指定的那样。然而它只是卡在那里，如下图所示

Problem

Answer 1

CSS中的声明顺序很重要（因此“Cascading”）。

因此，当你这样做时：

img.Logo{
  margin-top: 35px;
  margin-bottom: 35px;
  margin-left: 250px;
  margin: auto;
  background-color: #303030;
}

margin:auto会覆盖上面的所有边距。

您应该尝试将margin:auto置于其他边距之前，它应该可以正常工作。

Answer 2

我猜你在谈论你的徽标，而不是实际的header元素。

首先，你的css选择器是错误的。它应该是img.logo而不是img.Logo

此外，从您的CSS中删除div.wrapper代码。在那做什么？然后从margin: auto样式中移除img.logo，您就可以开始使用了。

Body标签中的第一个元素硬盘卡在左上角

2 个答案: