开发者

Top margin inside a div do not work?

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.

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;
}


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;
}


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


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;
}


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


use padding-top: 1px (at least) for the div.Links and you don't need to use float on the div.Links a

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜