asked on

Margin top not workling for anchor inside li item

I am novice to front end designing..I am trying to create a horizontal navigation menu..i have the the anchor tags inside li.. when i apply margin-top to anchor tag...it is not working.

   <ul id="navigationMenu">
                <li><a href="#" class="selectedmenu">Home </a></li>
                <li><a href="#" class="normalmenu">Menu1s </a></li>
                <li><a href="#" class="normalmenu">Menu2</a></li>
            </ul>
            <!-- end navigation menu-->

Open in new window

CSS:
#navigationMenu li
{
background: gray;
display: inline-block;
padding: 10px 50px;
display: inline-block;
float: left;
border: 2px solid black;
}

#navigationMenu li a
{

font-size: 20px;
text-decoration: none;
border: 1px solid red;
font-weight: bold;
margin-top: 30px;

}

The margin-top for anchor tag inside li is not working...whereas margin left and right are working fine..I know that we can achieve this by setting padding top of li..Since i am new i like to know why the anchor tag margin top is not working

ASKER CERTIFIED SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

qwerty021600

give padding-top for <a> element rather than margin-top..

qwerty021600

give this way :
#navigationMenu li
{
background: gray;
display: inline-block;
padding: 10px 50px;
display: inline-block;
float: left;
padding-top: 30px;
border: 2px solid black;
}

#navigationMenu li a
{

font-size: 20px;
text-decoration: none;
border: 1px solid red;
font-weight: bold;
padding-top:30px;

}

it'll work