margin-top和margin-bottom是如何添加的?

Question

我正在通过CSS和HTML阅读后建立我的第一个网站。我可以在我的索引页上加上导航条和品牌。对于品牌，我使用margin-top属性在中心对齐，并使用float属性设置导航链接。但是，当我使用firefox检查ul元素时，

1. 我看到16 px的margin-top和margin-bottom，我不知道如何添加。
2. 使用margin-top属性对齐品牌是正确的居中对齐方式吗?
3. 为什么ul元素不采用44 px的整个高度设置头

我正在添加plunker url以获取更多详细信息:http://plnkr.co/edit/RjQtIR?p=preview

详细代码:

<header class="main-header">
        <nav class="top-bar clearfix">
            <span class="brand">Money Plant Services</span>
            <section class="nav-menu">
                <ul class="nav-items">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Downloads</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </section>
        </nav>
    </header>
CSS:
.main-header{
  width: 100%;
  height:44px;
  background-color: #3A3A3A;
}
.brand{
  float: left;
  margin-top: 12px;
  padding-left: 10px;
  color: #FFFFFF;
}
.nav-menu{
  float:right;
}
.nav-items{
  list-style: none;
}
.nav-items li{
  float: left;
  margin-right: 5px;
  padding: 5px;
  background-color: #FFFFFF;
}
li > a{
  color: black;
  text-decoration: none;
}

Answer 1

我希望这对你有帮助。只需将下面的代码替换为您的代码，它就可以工作了…

CSS:

.nav-items {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top:8px;
  display: inline-block;
}

Answer 2

Ul有一个默认的边距，所以你可以通过添加....

来删除它

 <ul style="margin:0px">

不同浏览器的页边距也不同，所以值得在网上查看相关信息，或者使用inspect element自己测试一下。

水平对齐有很多方法…

你可以使用text-align方法或者margin auto方法或者自定义padding方法。(也有其他方法)。

的例子:

<div style="width:400px;height:20px;text-align:center;">
<div style="width:20px;height:20px;">
</div></div>

的例子:

<div style="width:400px;height:20px;">
<div style="width:20px;height:20px;margin-left:auto;margin-right:auto;">
</div></div>

垂直对齐有点困难，但可以用表格单元格完成(也有其他方法)。

正确的对齐方式是使用text-align属性或使用w3c验证服务所说的自动边距。