CSS: extra gap between LI elements [duplicate]

Question

At this site, when you hover over a menu item in the large footer menu, there is a gap to the left of the blue li:hover and to the right of the border of the previous li (indicated by the red section below):

I have zoomed into 200% and inspected this region, but cannot see what is causing this gap.

Can you?

Answer 1

The spaces that appear are the actual spaces between the inline block tags. If you have

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

then the spaces will appear between the inline blocks, just as spaces appear between the words you type.

If you change it to

<ul>
    <li>a</li><li>b</li><li>c</li>
</ul>

Then you no longer see the spaces between the items.

One way to easily demonstrate that this is happening is that you can actually highlight the spaces, cut and paste them.

In order to prevent this from happening, you can set

.footer-menu ul, .footer-menu-links ul {
    font-size:0px;
}

but this may affect child elements without an easy way to rectify it, so you may also be able to use

.footer-menu ul, .footer-menu-links ul {
    word-spacing:-.25em;
}

.footer-menu ul *, .footer-menu-links ul * {
    word-spacing:normal;
}

Or in an HTML5 document, you can simply skip the closing tags to avoid the issue entirely, since it just plain doesn't care.

If that's not possible, you can also use comments to 'block off' the white space like this:

<ul><!-- Comment tags can also be used to block off the whitespace
    --><li>a</li><!--
    --><li>b</li><!--
    --><li>c</li><!--
--></ul>

That allows you to keep the elements separated for the improved legibility of having one item per line, but it is a little more cluttered to read.

Answer 2

It's pretty simple using flexbox

.home .footer-menu {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

now, just play around with the text alignment of the buttons vertically