为什么我不能在两个div之间应用间距

时间:2015-04-25 15:11:50

标签: html css

我有5个div,在第一个和第二个之间我在button2类margin-top上设置了间距:10px;但这仅适用于第二和第一div之间,为什么我在第二和第二之间没有间距...... 我不知道为什么我的第三和第四个div之间的距离很小。

JSFIDDLE:http://jsfiddle.net/avggqr02/

HTML

.contactdiv{
    width:271px;
}
.ppdiv{
    overflow: hidden;
    margin-top:20px;
    margin-left: 20px;
}
.ppenvelope, .pptext {
    float: left;
    border: none;
    height: 48px;
}
.ppenvelope{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #b2d4dd;
}
.ppdiv img{
    padding:10px;
}
.button2 img{
    padding:10px;
}

.pptext{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #c9e0e6;
    color:#4c6974;
}
.pptext2{
    display: inline-block;
     color:#4c6974;
       padding-top: 13px;
       padding-bottom:13px;
       padding-left: 13px;
        padding-right: 13px;
}
.button2{
    margin-top: 10px;
    margin-left:20px;
}

CSS:

public class MyClass
{
    public static int X { get; set; }

    public static void MyMethod()
    {
        Console.WriteLine("X = {0}", X);
    }
}

1 个答案:

答案 0 :(得分:1)

你里面有一些浮动元素,所以你需要明确修复。

.button2 {
    overflow: auto;
}

http://jsfiddle.net/avggqr02/1/

或者使用clear fix hack。

.button2:after {
    clear: both;
    content: "";
    display: table;
}

http://jsfiddle.net/avggqr02/2/