Strange padding

So strange padding

by Uncle Bens

HTML

<div class="gallery">
  <div class="work book">
    <img src="https://drscdn.500px.org/photo/33805541/m%3D900/da5da201ebb5f403155098670a41252e" alt="">
  </div>
  <div class="work album">
    <img src="http://thisismysuit.com/wp-content/uploads/2015/07/SKYMETRIC-4.jpg" alt="">
  </div>
  <div class="work book">
    <img src="https://drscdn.500px.org/photo/33805541/m%3D900/da5da201ebb5f403155098670a41252e" alt="">
  </div>
</div>

CSS

* { margin: 0;}
img {
  display: block;
  width: 100%;
}
.work {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  padding: 10px;
  background-color: #ccc;
}
.album {width: 50%;}
.book {width: 25%;}