CSS：margin-bottom 不起作用并且 div 标签的内容显示在边框之外答案

【问题标题】：CSS: margin-bottom not working and contents of div tag are showing out of border boxCSS：margin-bottom 不起作用并且 div 标签的内容显示在边框之外
【发布时间】：2018-08-09 15:00:24
【问题描述】：

我想解除标题部分中的导航链接。它们都位于 div 类“headers”下的 div 类“links”中。

但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: 25px的相对定位将它们全部向下移动，所以不确定您还预计会发生什么。
你需要什么。请解释一下。
你的.links div 确实有它的margin-bottom 工作。你想做什么？您的a 链接是开箱即用的，因为您在.links 上使用float: right，正如@CBroe top: 25px 在您的a 上所说的那样
@Arkellys 我想将我的导航链接提升到标题部分的底线上方。

标签： html css margin

【解决方案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;
        }

【讨论】：