CSS: extra gap between LI elements

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?

Steve K · Answer 1 · 2017-11-01T23:14:51.493

5

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.

edited Nov 01 '17 at 23:14

answered Jun 01 '16 at 05:03

Steve K

4,863
2
32
41

Is that normal browser behaviour? I thought browsers ignored such spaces. – Steve Jun 01 '16 at 05:06
2
Browsers ignore whitespace in HTML code, but a
– Steve K Jun 01 '16 at 05:09
For instance, to understand the behavior, think of a `block` element as being replaced with a `
` and an `inline-block` as being replaced with a ``.
– Steve K Jun 01 '16 at 05:45
I've used `.footer-menu ul, .footer-menu-links ul { font-size:0px; }` but there is now [a gap at the top of each `li`](http://staging.venusanddiamonds.com/). – Steve Jun 01 '16 at 05:54
Try the last way I presented, using the word-spacing property, or set the font-size back to what it was before for all children of your `
- ` elements.
– Steve K Jun 01 '16 at 06:22
I am using Wordpress, so I cannot remove the `` tags. I've used the last way you wrote, but the issue remains. – Steve Jun 01 '16 at 06:56
I added the word-spacing property and it seems to fix it just fine in Chrome (51.0.2704.63). The only layout change I see is the horizontal spaces are gone when the property is added. The space doesn't seem to appear even without the extra property in Firefox 31 or IE 11 either. What browser are you seeing the issues in? – Steve K Jun 01 '16 at 23:17

score 1 · Answer 2 · answered Jun 01 '16 at 04:54

1

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

answered Jun 01 '16 at 04:54

Louie Almeda

5,366
30
38

Thanks. [Looks like only IE > 11 has some support](http://caniuse.com/#feat=flexbox). – Steve Jun 01 '16 at 05:02
2

This doesn't answer the question. OP is asking why is there a gap. – Evan Trimboli Jun 01 '16 at 05:03

score 0 · Answer 3 · answered Jun 01 '16 at 04:58

0

You can change the css

.home .footer-menu {
    border-bottom: 1px solid #EEE;
    border-top: none;
    margin-bottom: 0;
}

To this will fix the issue

  .home .footer-menu {
    border-bottom: 1px solid #EEE;
    border-top: none;
    margin-bottom: 0;
    font-size: 0; // Added this line
}

answered Jun 01 '16 at 04:58

Shijin TR

7,516
10
55
122

This doesn't answer the question. OP is asking why is there a gap. – Evan Trimboli Jun 01 '16 at 05:02
Thanks. If I add that, the horizontal gap is removed, but now there is a gap at the top of the `li`, please see the [live site](http://staging.venusanddiamonds.com/) again. – Steve Jun 01 '16 at 05:05
As I said, you didn't answer the question. The question is "why is it there", not "how do I fix it". – Evan Trimboli Jun 01 '16 at 05:06
@Steve Do you notice that the first item don't have a gap? – Shijin TR Jun 01 '16 at 05:15
Yes Shijin. How we ensure all items don't have a gap? Thanks. – Steve Jun 01 '16 at 05:35
I tried ,but unable to find the reason.I will let you know if i got an idea – Shijin TR Jun 01 '16 at 05:43

score 0 · Answer 4 · answered Jun 01 '16 at 05:01

You have to add  this with in your li see the below code.

<ul class="footer-menu" id="menu-primary-menu"><li class="first-menu-item menu-item-type-post_type menu-item-object-page menu-item-38" id="menu-item-38"><a href="http://staging.venusanddiamonds.com/about-us">About Us</a></li><!--
--><li class="last-menu-item menu-item-type-post_type menu-item-object-page menu-item-39" id="menu-item-39"><a href="http://staging.venusanddiamonds.com/shopping">Shopping</a></li><!--
--><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40" id="menu-item-40"><a href="http://staging.venusanddiamonds.com/shipping">Shipping</a></li><!--
 --><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41" id="menu-item-41"><a href="http://staging.venusanddiamonds.com/jewellery">Jewellery</a></li><!--
--><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42" id="menu-item-42"><a href="http://staging.venusanddiamonds.com/black-diamonds">Black Diamonds</a></li><!--
--><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43" id="menu-item-43"><a href="http://staging.venusanddiamonds.com/bespoke">Bespoke</a></li><!-- 
--><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44" id="menu-item-44"><a href="http://staging.venusanddiamonds.com/coming-soon">Coming Soon</a></li>
</ul>

score 0 · Answer 5 · answered Jun 01 '16 at 05:05

It's white-space. If you write your list like this:

<li id="menu-item1">
    <a>Link</a>
</li><li id="menu-item2">
    <a>Link</a>
</li>

or

<li id="menu-item1">
    <a>Link</a>
</li><!--
--><li id="menu-item2">
    <a>Link</a>
</li>

instead of

<li id="menu-item1">
    <a>Link</a>
</li>
<li id="menu-item2">
    <a>Link</a>
</li>

it will remove the gaps.

score 0 · Answer 6 · answered Jun 01 '16 at 06:24

May b it will be helpful for you.

{ display: inline-block ; } take default margin from left side so you can scoot the elements back into place with negative 4px o margin (may need to be adjusted based on font size of parent). Apparently this is problematic in older IE (6 & 7), but if you don't care about those browsers at least you can keep the code formatting clean.

For your clarification i attached the Fiddle also:

https://jsfiddle.net/hehrvjhx/1/

CSS: extra gap between LI elements

6 Answers6