top margin inside a div do not work ? help plz

Question

Hello,

I have a div that contains links (a href). All other margins are working with a href but Top margin is not working with a href. I want to place links in middle but because of not working of top margin it is not being possible. I heared by setting position or display it can work. Please suggest a cross broswer solutions for it.

thanks

div.MainContainer div.Links
    {
        height: 57px;
        width: 100%;
        border-top: solid 0px #404040;
        border-left: solid 2px #404040;
        border-right: solid 2px #404040;
        border-bottom: solid 2px #404040;
        background-image: url("../Images/links_background.png");

    }
    div.MainContainer div.Links a
    {
        font:12px verdana;
        color:White;
        margin:10px;
        border:dashed 1px white;
        margin:15px 20px 20px 20px ;
        width:100px; 

    }

Answer 1

You need to float element to make margin working or use padding instead.

div.MainContainer div.Links a
    {
        float: left;
        font:12px verdana;
        color:White;
        margin:10px;
        border:dashed 1px white;
        margin:15px 20px 20px 20px ;
        width:100px; 

    }

Answer 2

Try padding-top on the div.Links rather than margin-top on the div.Links a.

Answer 3

Use padding or line-height

div.MainContainer div.Links a
{
    line-height: 57px;
    padding: 100px;
}

Answer 4

Height of inline elements can't be changed, just use display:inline-block; on your links.

Answer 5

Try below. I added overflow: hidden to the top definition and display: block and float: left to the bottom definition. The first addition clears the float being added, and the last two allow the margin on the links to work correctly.

  div.MainContainer div.Links
    {
        height: 57px;
        width: 100%;
        border-top: solid 0px #404040;
        border-left: solid 2px #404040;
        border-right: solid 2px #404040;
        border-bottom: solid 2px #404040;
        background-image: url("../Images/links_background.png");
        overflow: hidden;

    }
    div.MainContainer div.Links a
    {
        font:12px verdana;
        color:White;
        margin:10px;
        border:dashed 1px white;
        margin:15px 20px 20px 20px ;
        width:100px; 
        display: block;
        float: left;

    }