When a div of images wraps, possible to treat the wrap like a span?

Question

I have a div full of images:

.species {
  background-color: lightblue;
  margin-top: 20px;
  display: inline-block;
}
.animals {
  display: inline;
  margin: 0;
  margin-right: 25px;
  margin-top: 5px;
}
.animal {
  width: 25px;
  padding: 8px 2px 0 2px;
  display: inline;
}

<div class="species">
  <div class="animals">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <!-- imagine about 30 more ants -->
  </div>
</div>

Since my content well is limited to 600px, the div (.animals) containing the ants wraps, like so:

But I want it to wrap like a <span>, ending with the last ant, like this (created in photo editor):

However, if I give the parent <div> an inline display or change it to a span, the parent doesn't expand to the height of the images, so I get this:

fiddle example

So my question: Is it possible to get the best of both worlds here between divs and spans, where the container sizes to the height of the images but doesn't expand to the width of the page on the last row?

I've tried various CSS commands for wrapping text and whitespace, to no avail.

Answer 1

Set background to img instead, and you don't need to have a second parent div .animals

.species {
  width: 600px;
  /* as you mentioned in your question */
  margin-top: 20px;
   font-size: 0
  /* fix inline(-block) gap */
}
.animal {
  width: 25px;
  padding: 8px 2px 0 2px;
  background-color: lightblue;
}

<div class="species">
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />

  <!-- imagine about 30 more ants -->
</div>