Phantom white space between 2
s

Question

built a simple no-dropdown horizontal nav for a new site design and its all working fine like normal except that between 2 buttons is a phantom white space that doesn't appear in dragonfly's metrics, or in the code, but is visible on the screen when the li's hover rule applies. and it does not appear between each li, just between 2 specific lis. i have attached images below showing what i mean:

no problem, everything looks as it should:

on the right side of the hovered li is a px of whitespace that shouldnt be there:

    .navi {
      display: inline-block;
      height: 50px;
      max-height: 50px;
      overflow: hidden;
      list-style: none;
      float: right;
    }
    .navi li {
      float: left;
    }
    .navi li a {
      padding: 16px;
      border-left: 1px solid #8bd854;
      font-size: 16px;
      text-decoration: none;
      line-height: 50px;
      color: #8c8c8c;
      transition: all 0.5s ease;
    }
    .navi li a:hover {
      background-color: rgba(13, 137, 0, 0.61);
      text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.57);
      color: #fff;
    }

<ul class="navi">
  <li><a href="">Home</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Lawn Care</a></li>
  <li><a href="">Tree &amp; Shrub Removal</a></li>
  <li><a href="">Contact</a></li>
</ul>

any idea where this may be coming from? It's not a huge deal if not Solvable but it is an annoyance.

Thanks in advance

Possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Sebastian Simon, Oct 28 '15 at 20:52
Do you know what browser(s) this is happening on? I tried copying that code to a fiddle and it rendered fine in Chrome and IE. There might be more to it than what you've presented. Any relevant links that can be used to replicate the behavior? — jeffjenx, Oct 28 '15 at 20:57
@Quantastical Firefox chrome and IE for me. you can actually see it in example if youd like https://stuart-robert.codio.io/ — JL Griffin, Oct 28 '15 at 21:01
I suspect there's more to the CSS that's causing the problem. What does your browser's web inspector say about the element in question? There's probably something else adding padding to it. — miken32, Oct 28 '15 at 21:07
I've run into this too. Not sure what's causing it, but try adding `display:block` to `.navi li a` and changing `padding: 16px` to `padding: 0 16px` on that same rule. — Joseph Marikle, Oct 28 '15 at 21:08
It apparently only happens when the browser is a very specific sizes. For example, I can see the white space on 1771px wide Chrome, but its not there on 1770px wide Chrome. Very interesting issue. At first glance, I suspect this to be a graphical rendering glitch. — jeffjenx, Oct 28 '15 at 21:09
@miken32 there isnt though. the inspector (dragonfly) shows margins and padding as normal, and if i simulate a hover with dragonfly the whitespace does not show up. — JL Griffin, Oct 28 '15 at 21:09
@JosephMarikle this works perfectly! please add that as an answer and ill accept it as the solution — JL Griffin, Oct 28 '15 at 21:14

score 2 · Answer 1 · answered Oct 28 '15 at 21:23

An easy way to fix this is by using the font-size:

.navi {
    font-size: 0;
}

.navi li {
    font-size: 1rem;
}

This sets the font size of the list to zero and the font size of the list element to the size of the root element (you may use any other unit – except em – if you want to).

score 1 · Answer 2 · answered Oct 28 '15 at 21:10

1

I was able to reproduce the issue in Chrome by setting the zoom to 110%. Perhaps, you could set the zoom of all the navigation elements and their children to be zoom: 1.0;.

answered Oct 28 '15 at 21:10

Alexander Dixon

837
1
9
24

score 1 · Answer 3 · answered Oct 28 '15 at 21:16

1

It is probably just whitespace. try

<ul class="navi"
  ><li><a href="">Home</a></li
  ><li><a href="">About</a></li
  ...
></ul>

answered Oct 28 '15 at 21:16

kornieff

2,389
19
29

score 1 · Accepted Answer · answered Oct 28 '15 at 21:18

I'm not entirely sure what is causing this. Maybe it's webkit or some nuance of CSS, but at least in this one particular case, you can add display:block to .navi li a and change padding: 16px to padding: 0 16px on that same rule. Unfortunately I can't figure out why this works but my best guess is that whitespace is causing the issue.

Phantom white space between 2 s

4 Answers4

Phantom white space between 2
s