I have a collection of images that I want to evenly distribute within a container. While I've come across several similar questions with helpful solutions, many involve using padding or margins, resulting in empty gaps along the edges of the div.
Currently, I'm adding a margin-right to each image, which works well except for the last image, leaving an unappealing gap. While I could create a separate class for the final image without margin, I'm hoping for a more elegant solution. Are there any other approaches I can take?
#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>