html - CSS:margin-bottom 不起作用并且 div 标签的内容显示在边框之外
问题描述
我想解除标题部分中的导航链接。它们都在 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>
解决方案
您应该删除标记样式中的边距 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;
}
推荐阅读
- azure - 在 Azure Functions 应用中存储 Azure ConnectionString 的位置
- javascript - 如果对象具有特定值,则使用 Mongo 脚本更新对象
- tsql - 如何在 SQL 存储过程中编写条件?
- azure - 通过管理组强制所有 Azure 访问
- python - 读取 csv 时 Pandas dtype 选项错误
- azure - 如何解决 Azure 应用设置密钥长度限制
- c# - 机器人模拟器 - 无法调试
- javascript - while循环内的多个选择标签下拉列表,但仅从最后一个中检索数据
- javascript - 如何使用 Vue 和 json 获取特定数组
- c++ - 我应该为 QWidget 的派生定义一个析构函数吗