我想取消标题部分中的导航链接。它们都在 div 类“标题”下的 div 类“链接”中。
但是 margin-bottom 属性没有任何影响。
因此，为了检查位置是否有任何变化，我在 div 类“链接”周围设置了边框。
但是当边框出现时，所有的导航链接都显示在框外。
此外，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>最佳答案
你应该删除标记样式中的 margin 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;
}
关于html - CSS: margin-bottom 不工作并且 div 标签的内容显示在边界框之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51760370/