爲什麼我不能在兩個div之間應用空格

Question

我有5個div，並且在第一個和第二個之間我在button2上設置了空格margin-top：10px;但這隻適用於第二和第一格之間，爲什麼我沒有第三和第二間隔... 我不知道爲什麼我有第三和第四格之間的小間距。

的jsfiddle：http://jsfiddle.net/avggqr02/

HTML

<div class="contactdiv"><div class="ppdiv"> 
<button class="ppenvelope"><img src="http://i.imgur.com/QU5CvxC.jpg" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span></button> 
</div><!--Zatvoren ppdiv--><div class="button2"> 
<button class="ppenvelope"><img src="http://i.imgur.com/QU5CvxC.jpg" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span></button> 
</div><!--Zatvoren button2--><div class="button2"> 
<button class="ppenvelope"><img src="http://i.imgur.com/QU5CvxC.jpg" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span></button> 
</div><!--Zatvoren button2--><div class="button2"> 
<button class="ppenvelope"><img src="http://i.imgur.com/QU5CvxC.jpg" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span></button> 
</div><!--Zatvoren button2--><div class="button2"><button class="ppenvelope"><img src="http://i.imgur.com/QU5CvxC.jpg" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span></button> 
</div><!--Zatvoren button2--> 
</div><!--Zatvoren contactdiv--> 

CSS：

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

Answer 1

你有一些浮動元素裏面，所以你需要明確的定位。

.button2 { 
    overflow: auto; 
} 

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

或者使用明確的修復黑客攻擊。

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

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