CODEWITHSUNDEEP
htmlcss
Mahaveer
Mahaveer

Reputation: 435

CSS margin not working right

Can someone please tell me , why i can't add margin-top/bottom or padding-top/bottom to this "a" tag. I need to ceter "Konoha" in the Header box

html{
	background-color: white 
}


body{	
	width: 88.5%;
	height: 1200px; 
	margin: 0 auto;
	border: 2px solid black;
	background-color: #161e2c;
}

.top-box{
	margin:0 auto; 
	width: 99.5%;
	height: 153px;
	background-color: #314e59;
	border:1px solid rgb(211, 41, 97);
	box-shadow: 0px 10px 7.4px 2.6px rgba(0, 0, 0, 0.74);

}

a{
	display: inline-block;
	margin: 23px 0 0 5px;
	padding: 5px 5px;
	max-width: 400px;
	color: white;
	text-decoration: none;
	font-size: 500%;
	background-color:pink;
	border:2px solid black;
	
	
}

.right{
	margin-top:13;
	display: inline-block;
	width: 600px;
	background-color: pink;
	border:2px solid black;
	float: right;
	text-align:center;
	color:white
}

ul{
	display: inline-block;
	list-style-type: none;
	font-size:35px;
	width:100%;
	padding-left:0;

}

li{
	display:inline-block;
	padding:7px;
}
<body>
	<header class = "top-box">
		<a href="#" class = "logo">Konoha</a>
		<div class = "right">
		<ul>
			<li>Text</li>
			<li>Text</li>
			<li>Text</li>
			<li>Text</li>
			<li>Text</li>
		</ul>
		</div>
	</header>
 </body>

Thanks all this problem was solved , but now i have a new problem.

  1. Why cant i just use margin-top:50% and margin:bottom:50% on the classes .logo and .right According to what i've read margin:bottom:50% and margin-top:50% should automatically center vertically both.right and .logoin their container header but rather they come to some random middle place of the page

2.If i use margin-top:x% then when i resize the window to small the LOGO shifts from being in middle of headerto top.

Upvotes: 1

Views: 4898

Answers (3)

Bhawna
Bhawna

Reputation: 705

Try to make a tag as block element. Add this 

display:block

in a tag's CSS properties.

Or put a tag inside a block element

Upvotes: 0

ThiepLV
ThiepLV

Reputation: 1279

Because margin-top/bottom or padding-top/bottom only apply for block element
But <a></a> is a inline element.

You can read about Block formatting contexts

You can try:

HTML code

<body>
    <header class = "top-box">
        <div id = 'link'><a href="#">Konoha</a></div>
    </header>
</body>

CSS code:

#link{
color: white;
text-decoration: none;
font-size: 100px;
margin-top: 50%;
margin-bottom: 50%;
}

Upvotes: 1

Hamed mayahian
Hamed mayahian

Reputation: 2343

anchor is a inline element if you want to use padding-top/bottom, you should using add display:block for anchor tag

a{
color: white;
text-decoration: none;
font-size: 100px;
display:block
}

readmore

Upvotes: 0

Related Questions