padding-top not working but padding-right is

Question

this is my css:

body { 
margin: 0px;
background-color: white;
}

#navbar { 
background-color: red;
margin: 0 auto;
width: 900px;
height: 200px;
}

#navbar a { 
padding: 20px;
color: grey;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}

navbar is a div inside body and i have a couple of tags inside navbar.

this is the output:

Answer 1

I figured it out, I just needed to use: display:inline-block;

Answer 2

there is a difference between the 'Block level' elements and 'Inline Elements'. The Margins & Paddings of 'Inline Elements' effect only in Horizontal Direction, but not in Vertical Direction, as per the basic concept.

Your Div was a block level element, but anchor tag is an inline element. To give vertical space make it a block element, as you've already found out OR put the anchor in a div, which has vertical space in form of 'padding' or 'margin'!

div a {display:block;padding:20px;} OR div a{display:inline-block;padding:20px;}

In later two cases, padding will now effect in vertical direction also, as has now converted to block-level element, from inline form. Hope, that helps!

Answer 3

you can try like this: Demo

#navbar a {       
    display:block;
    float:left;
}