When a div image wraps around, is it possible to handle the wrapper as 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 is well limited to 600px , a div ( .animals ) containing ant wraps looks like this:

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

However, if I give the parent <div> built-in display or change it to span , the parent will not expand to the height images, so I get the following:

script example

So my question is: is it possible to get the best of both worlds here between div and span s, where is the container size for the height images but does not apply to the width page in the last line?

I tried various CSS commands to wrap text and spaces, but 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> 

Answer 2

 .species { margin-top: 20px; } .animals { display: table; margin: 0; margin-right: 25px; } .animal { width: 25px; background-color: lightblue; display: inline-block; vertical-align: top } 

script https://jsfiddle.net/zv3orszy/9/

Answer 3

remove background-color: lightblue; from the .species class and add it to the image ( .animal ) instead

 .species { /* background-color: lightblue; */ margin-top: 20px; } .animal { width: 25px; padding: 8px 2px 0 2px; display: inline; background-color: lightblue; } 

If you are interested in using inline, you should add font-size:0; in # ex1 and # ex2, that is, the parent to remove the gaps between the inline and inline blocks. You can also adjust the filling of the images to properly align them to your needs. Possibly padding: 8px 4px 2px 4px;

 #ex2 { display: inline-block; font-size:0; } 

 #ex1 { display: inline-block; font-size: 0; } #ex2 { display: inline-block; font-size:0; } .species { margin-top: 20px; } .animals { //border-bottom: 2px solid gray; display: inline; margin: 0; margin-right: 25px; margin-top: 5px; } .animal { width: 25px; padding: 8px 4px 2px 4px; display: inline; background-color: lightblue; } 

 <div id="ex1" class="species"> <div class="animals"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> </div> </div> <div id="ex2" class="species"> <div class="animals"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> </div> </div> 

Answer 4

Another way to do this is to replace margin-top: 20px; on padding-top:20px; on .species in the first example. Also .animals div is not required.

See below:

 #ex1 { display: inline; } .species { background-color: lightblue; padding-top: 20px; /*padding-top instead of margin-top*/ } .animals { //border-bottom: 2px solid gray; display: inline; margin: 0; margin-right: 25px; margin-top: 5px; } .animal { width: 25px; padding: 8px 2px 0 2px; display: inline; } 

 <div id="ex1" class="species"> <!--<div class="animals">--> <!-- .animals is not needed--> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <img class="animal" src="http://www.clker.com/cliparts/0/5/2/d/11954389722123324306Andy_-_ant.svg.thumb.png"> <!--</div>--> </div> 

Answer 5

You must choose your second demo due to the display of the div .species is inline-block container.

And set the tag background-color: light blue; in img instead . species . species .

 .species { display: inline-block; margin-top: 20px; font-size: 0; } .animals { //border-bottom: 2px solid gray; display: inline; margin: 0; margin-right: 25px; margin-top: 5px; } .animal { width: 25px; padding: 8px 2px 0 2px; /* display: inline; whatever you like*/ background-color: lightblue; } 

 <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"> <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"> <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"> <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>