div内的上边距不起作用？

Question

我有一个div包含链接（一个href）。所有其他边距都使用href，但上边距不适用于href。我想在中间放置链接，但由于没有上边距的工作，这是不可能的。我通过设置位置或显示它听到它可以工作。请为它建议一个交叉的解决方案。

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

您需要浮动元素以使边距有效或使用填充。

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

无法更改内联元素的高度，只需在链接上使用display:inline-block;即可。

Answer 3

试试以下。我将overflow: hidden添加到顶部定义，将display: block和float: left添加到底部定义。第一个添加清除正在添加的浮动，最后两个允许链接上的边距正常工作。

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

Answer 4

尝试padding-top上的div.Links而不是margin-top上的div.Links a。

Answer 5

使用padding-top: 1px（至少）为div.Links而你不需要在div.Links a上使用float