Question

I wanted to create a gallery with thumbnails, however I ran into an issue. If I want to space out the thumbs, I should do something like margin-right: 15px;, however that would create space for the furthest-right image. How would I go about creating those spaces without having them at the edge of a template?

Example:

Thanks!

Answer 1

What you need is negative margins on the container element:

http://jsfiddle.net/LYhum/

.container {
    margin: -10px 0 0 -10px;
}

.container .image {
    margin: 10px 0 0 10px;
    /* either floated or set to inline-block */
}

If your container is responsive (ie. you don’t know how wide it will be), flexbox is worth a look:

http://jsfiddle.net/LYhum/4/ (has fallback for browsers without flexbox support)

.container {
    margin: -10px 0 0 -10px;
    display: flex;
    -moz-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.container .image {
    margin: 10px 0 0 10px;
    background: red;
    width: 100px;
    height: 100px;
    display: inline-block;
}