CODEWITHSUNDEEP
htmlcss
riogrande
riogrande

Reputation: 349

Uneven spacing between every other button

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.

enter image description here

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>

enter image description here

Here you can see better how spacing is uneven

Upvotes: 3

Views: 357

Answers (2)

Marc J
Marc J

Reputation: 1433

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:

  1. Change the body font, but have sofia for the buttons

  2. 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>
  1. Change to block elements, set width: auto, float them all left, then add a specific margin to them.

Upvotes: 1

dippas
dippas

Reputation: 60603

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

Upvotes: 1

Related Questions