Float against inline-block

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

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:


instead of this:


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

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.