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
精彩评论