CSS：margin-bottom 无效，div 标签的内容显示在边框之外

Question

我想取消 header 部分中的导航链接。它们都在 div class "links" 中 div class "headers".

但是margin-bottom属性没有任何影响。

所以为了检查位置是否有任何变化，我在 div class "links".

周围设置了边框

但是当边框出现时，所有的导航链接都显示出来了。

此外margin-bottom对边框没有影响。

Jsfiddle：http://jsfiddle.net/L2k67eyx/

请告诉我我的代码有什么问题？还有什么规则我必须知道 margin 属性什么时候起作用？

代码片段：

body{
 height: 100vh;
 margin: 0px;
}
.header{

 background-color: white;
 height:50%;
 overflow: hidden;
 font-style: "Roboto";
 font-size: 25px;
 border-bottom: 2px solid;
 border-bottom-color: #cccccc;
}
.content{
 position: relative;
 background-color: white;
 height: 90%;
 overflow-y: auto;
}

.logo{
 float: left;
 left: 0px;
 padding-right: 50px;
}
#logo:hover{
 background: transparent;
}
.links{
 display: block;
 float: right;
 margin-right: 10px;
 margin-bottom: 10px;/*NOT WORKING*/
 /*right: 100px;*/
 border-style:solid;
 border-color: black;

 outline-style: solid;
 outline-color: green;
}
a{
 position: relative;
 right: 0px;
 top: 25px;

 padding-left: 10px;
 padding-right: 10px;

 color:black;
 letter-spacing: 2px;
 font-weight: 200;
 text-decoration: none;
}
a:hover{
 background-color:#cccccc; 
}

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
 <link rel="stylesheet" type="text/css" href="home.css">
 
 <title>Home Page</title>
 <style type="text/css">

 </style>
</head>
<body>
 <div class="header">
  <div class="logo">
   <a href="home.html"><img id="logo"src="logo.png" alt="Logo"></a>
  </div>
  <div class="links">   
   <a href="home.html">Home</a>
   <a href="home.html">Offers</a>
   <a href="home.html">Login</a>
   <a href="register.html">Register</a>
   <a href="home.html">Contact</a>
   <a href="home.html">About</a>
  </div>
 </div>
 <div clear="both"></div>
 <div class="content">
 
 </div>
<script type="text/javascript" src="home.js"></script>
</body>
</html>

Answer 1

您应该删除标记样式中的边距 top:0px

a{
            position: relative;
            right: 0px;
            top: 0px;

            padding-left: 10px;
            padding-right: 10px;

            color:black;
            letter-spacing: 2px;
            font-weight: 200;
            text-decoration: none;
        }

CSS：margin-bottom 无效，div 标签的内容显示在边框之外

CSS: margin-bottom not working and contents of div tag are showing out of border box

html

css

margin