Strange padding

So strange padding

HTML

<div class="gallery">
  <div class="work book">
    <img src="http://lorempixel.com/output/abstract-h-c-600-900-1.jpg" alt="">
  </div>
  <div class="work album">
    <img src="http://lorempixel.com/output/abstract-q-c-1200-900-2.jpg" alt="">
  </div>
  <div class="work book">
    <img src="http://lorempixel.com/output/abstract-h-c-600-900-3.jpg" alt="">
  </div>
</div>

CSS

* { margin: 0;}
img {
  display: block;
  width: 100%;
}
.gallery {
  display: inline-block;
  padding: 1%;
  background-color: #999;
}
.work {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  background-color: #ccc;
  
  padding: 1%; //
}
.album {width: 48%;}
.book {width: 25%;}