SASS inline block spacing fix

Here is a small snippet of SASS code that I created to remove the unwanted space you may get between inline block elements.

So my fix essentially removes the space character between 2 inline block elements. Now This space is caused because inline block elements are still inline, and therefore any whitespace (spaces or returns) between the elements/HTML tags in the code will produce a single space character (by default). This can be solved in a few different ways, one of which is using this short SASS mixin below.

It is important that the value used in the mixin is in ems because this means it will continue to work if the font size changes.

Here is the mixin which removes the spacing between the inline block elements:

@mixin inline-block-fix() {   margin-left: -0.28em; }

As you can see above the mixin sets a negative left margin equal to that of 1 space at the specified font size. Typically the space is equilivant to 0.25em in width, however it can vary depending on the font.

To use this simply call it in on the inline block element. See the example below:

.wrapper {
   background: grey;
   width: 100%;
   text-align: center;
   div {
     display: inline-block;
     width: 100px;
     height: 100px;
     background: skyblue;
     border: 1px solid black;
   }
   &.fix {
     div {
       @include inline-block-fix();
     }
   }
}

See the Pen Inline-block space fix by Jon Catmull (@catmull) on CodePen.

And thats it!

If you have any questions or want to let me know how it worked for you then either leave a comment below or drop me a message.

Happy coding people.