Распространение изображений через контейнер

Question

У меня есть серия изображений, которые я хочу распределить равномерно по div. Я видел много вопросов, подобных этому, с очень хорошими ответами, но многие используют для этого добавление/поля, которое оставляет пустые промежутки на левом и правом краях содержащего div.

Прямо сейчас я применяю край справа к каждому изображению, которое работает, за исключением самого последнего изображения, которое имеет уродливый пустой пробел с правой стороны. Я мог бы просто применить другой класс к последнему изображению без полей, но я надеюсь на более чистое решение. Какие у меня есть другие варианты?

#photo_bar { 
    margin-bottom:15px; 
    width:785px; 
} 

#photo_bar a { 
    margin-right:7px; 
} 

.photo_bar_image { 
    border-radius:9px; 
    background-size: 125px; 
    display: inline-block; 
    width: 125px; 
    height: 125px; 
    text-decoration: none; 
    transition: background-size 0.2s, background-position 0.2s; 
} 

.photo_bar_image:hover { 
    background-size:140px; 
    background-position: -5px -5px; 
} 

<section id='photo_bar'> 
    <a class='photo_bar_image'></a> 
    <a class='photo_bar_image'></a> 
    <a class='photo_bar_image'></a> 
</section> 

Answer 1

Как насчет этого?

img:last-child { 
    // change the margin here! 
} 

Это будет применено к последнему элементу изображения в контейнере!

Для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child