Reputation: 349
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
Upvotes: 3
Views: 357
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:
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>
Upvotes: 1
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