Float against inline-block

[donboe]

I have a gallery when where I use:

.gallery li {
  width: 26%;
  float: left;
  margin: 0 11% 4em 0;
  text-align: center;
  overflow: hidden;
  position: relative;         
}

.gallery li:nth-child(3n+3) {
  margin: 0 0 4em 0;    
}

The gallery is showing how I would exxpect three thumbnails with the right in between margin. When however I use display: inline-block, which i prefer to use, every third thumbnail is pushed down. Only when I take a fraction of the percentage off it works. How is this possible?

Thank you in advance

[ralphm]

inline-block elements leave space between them, just like words within text. So you have to account for this. There are some CSS workarounds, but they aren’t ideal. A simple option is to remove the space between your elements. E.g., you can do this:

<ul>
    <li>content</li><li>content</li> 
</ul>

instead of this:

<ul>
    <li>content</li>
    <li>content</li> 
</ul>

Here’s a demo of a CSS method for removing space between inline-block elements, based on a solution by @PaulOB and @Rayzur.