Uneven spacing between every other button

Question

I have a set of buttons (made with <a></a> or button the effect is the same) which are inline-block elements.

When I put many of them inline, spacing between them is not even. Every other button have different spacing.

Please note that I am not trying to remove the space between buttons, I want it to be even.

The difference is about 1px between first and second button, but second and third have as it appears to be 2px spacing. The pattern then continues. I put black and arrow on matched spacings so you can see the pattern.

CSS

.btn,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  @include transitions;
  display: inline-block;
  overflow: visible;
  margin: ($baseline/2) 0;
  padding: .6em 2em;
  background: $default;
  color: #fff;
  text-decoration: none;
  vertical-align: top;
  -webkit-appearance: none;
  outline: none;
  border: 0;
  cursor: pointer;
  zoom: 1;
}

HTML

        <a class="btn bg-green" href="#" role="button">Download</a>
        <a class="btn bg-yellow" href="#" role="button">Download</a>
        <a class="btn bg-red" href="#" role="button">Download</a>
        <a class="btn bg-blue" href="#" role="button">Download</a>
        <a class="btn bg-silver" href="#" role="button">Download</a>
        <a class="btn bg-gray" href="#" role="button">Download</a>

Here you can see better how spacing is uneven

Spacing seems fine - see example https://jsfiddle.net/tnfLc58h/2/ — aphextwix, Apr 08 '16 at 17:04
You really should create a demo that can reproduce the issue. — Stickers, Apr 08 '16 at 17:04
@aphextwix the OP appears to be using Sass but your example is not doing so — scniro, Apr 08 '16 at 17:06
baseline is 20px so 20/2 = 10px on margin so its not something that would couse the problem — riogrande, Apr 08 '16 at 17:07
@riogrande Well call me naive but your margin property might be related to a margin issue ;) — aphextwix, Apr 08 '16 at 17:09
@riogrande But Pangloss is right, you need to recreate the issue. — aphextwix, Apr 08 '16 at 17:10
Make sure `font-size` and spacing between links is consistent. Also, either share the link or recreate it. — Oriol, Apr 08 '16 at 17:12
https://jsfiddle.net/570a65r7/ here is the fiddle but the spacings are god there.... — riogrande, Apr 08 '16 at 17:16
ok give me a minute to upload it, in meantime please look at another image i put in question — riogrande, Apr 08 '16 at 17:18
Please guys look at the new image i edited, call me crazy but the spacing is bigger — riogrande, Apr 08 '16 at 17:20
http://marioloncarek.com/stack/doc/ui.html Here is the live link please scroll until buttons — riogrande, Apr 08 '16 at 17:23
[Here](https://jsfiddle.net/hgdq2946/) is the minimal demo to reproduce the issue, very interesting! The last gap looks smaller than the rest, tested both Firefox and Chrome on the Mac. — Stickers, Apr 08 '16 at 17:30
I cant reproduce the bug anywhere... only live demo and images :( — riogrande, Apr 08 '16 at 17:32
I can see the issue here, I can't say why but it must be something to do with the whitespace, and it can be fixed see the [updated demo](https://jsfiddle.net/hgdq2946/1/). Hope that helps. — Stickers, Apr 08 '16 at 17:41
your suggestion need font-size:0 on body to work? im not feeling like doing that .. — riogrande, Apr 08 '16 at 17:44
Yea but that should like modular button used everywhere, no container needed — riogrande, Apr 08 '16 at 17:45
@Pangloss look at dippas answer below, what the hell is going on with my font — riogrande, Apr 08 '16 at 17:47
Nothing wrong with your font, it's the font-size matters I guess, also read [this](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) but I don't know why the whitespace renders differently. — Stickers, Apr 08 '16 at 17:51
I know about that, and this post is about removing it, im not trying that, im fine with the space between, just need it to be the same — riogrande, Apr 08 '16 at 17:52
I can't explain, that's way I didn't post an answer, I do see the issue even with the default sans-serif font. — Stickers, Apr 08 '16 at 17:53
You're welcome, it is very interesting, I might start a bounty some time, will leave you a comment if I found out an answer that can explain everything. — Stickers, Apr 08 '16 at 17:57
Yea that would be great i will start a bounty when ever you want — riogrande, Apr 08 '16 at 17:59

score 1 · Accepted Answer · answered Apr 08 '16 at 17:42

1

From what I could figure it out , the problem to me seems to be the sofia font set on body, so:

if you change for Arial, you'll see that there is no difference in the gaps.

or
you can increase your current font-size from 15px to 16px and keep the sofia

answered Apr 08 '16 at 17:42

dippas

49,171
15
93
105

Ok, what the hell? Also works when font-size is 14px. Why would font do that? Your answer is correct tho – riogrande Apr 08 '16 at 17:46

score 1 · Answer 2 · answered Apr 08 '16 at 18:06

dippas answer correctly points out that the font is the problem. To be more specific, it is the font used for the space inbetween the buttons that is the problem. If you dont want to change the font on your buttons, here are some workarounds:

Change the body font, but have sofia for the buttons
Remove the spaces between the buttons and use margin instead. There are two ways to do this: 1) Put exactly no whitespace between adjacent buttons or, 2) Use HTML comments to comment out all whitespace

<!-- No whitespace inbetween -->
<a class="btn"></a><a class="btn"></a>

<a class="btn"></a><!-- Or, comment it out
--><a class="btn></a>

Change to block elements, set width: auto, float them all left, then add a specific margin to them.

Great advice's! Thanks a lot – riogrande Apr 08 '16 at 18:25 — riogrande, Apr 08 '16 at 18:25

Uneven spacing between every other button

2 Answers2