Search code examples
htmlcssmargin

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

I want to lift the navigation links in my header section. They all are in a div class "links" which is under div class "headers".

But the margin-bottom property doesn't have any impact.

So to check whether there is any change in position I made the border around the div class "links".

But when border appeared all the navigation links are shown out of the box.

Also there is no impact of margin-bottom on the border box.

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

PLEASE let me know whats wrong with my code? Also is there any rules I must know when does margin properties work?

CODE Snippet: 

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>

Solution

  • you should to remove margin top:0px in tag a style to be 

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

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

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