Why I can't applied spacing between two divs

Question

I have 5 div, and between first and second I have spacing set on button2 class margin-top:10px; But that's applied only between second and first div, why I don't have spacing between thrid and second ... I don't know why I have little spacing between third and fourth divs.

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

score 1 · Accepted Answer · answered Apr 25 '15 at 15:20

1

You have some floating elements inside, so you need clear fix.

.button2 {
    overflow: auto;
}

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

Or use the clear fix hack.

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

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

answered Apr 25 '15 at 15:20

Stickers

75,527
23
147
186

If you search for "clear floating" you will see lots of articles. such as http://www.impressivewebs.com/clearing-floats-why-necessary/ and here is a SO post http://stackoverflow.com/questions/8554043/what-is-clearfix and this one http://stackoverflow.com/questions/9543541/what-does-the-clearfix-class-do-in-css – Stickers Apr 25 '15 at 15:24

Why I can't applied spacing between two divs

1 Answers1