We help IT Professionals succeed at work.

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
Comment
Watch Question

Fixer of Problems
Most Valuable Expert 2014
Commented:
It appears after some research and experiments that 'margin-top' simply does not work with 'a' elements unless you add "display: block;" to the definition.
#navigationMenu li a
{
	font-size: 20px;
	display: block;
	text-decoration: none;
	border: 1px solid red;
	font-weight: bold;
	margin-top: 30px; 
}

Open in new window

give padding-top for <a> element rather than margin-top..
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