Extra space between nav links

Question

I have some extra space for my responsive nav links that is not being defined anywhere in the CSS. This space is removed after I reduce the page width. Can anyone identify the cause of the extra space, it is baffling me. Here is a fiddle: http://jsfiddle.net/DjftP/

The nav is coded as follows:

<div id="navigation">
    <div class="chunk-nav-hrz-fxd" data-nav-fxd="200">
        <nav>
            <a>Link1</a>
            <a>Link2</a>
            <a>Link3</a>
            <a>Link4</a>
        </nav>
        <nav class="nav-right">
            <a>Link5</a>
            <a>Link6</a>
        </nav>
    </div>
</div>

LESS:

.chunk-nav-hrz-fxd                    {.chunk; padding: 0; .clearfix}
.chunk-nav-hrz-fxd nav                {line-height: 40px; .clearfix; margin-bottom: 0; padding-left: 0; display: inline-block; float: left}
.chunk-nav-hrz-fxd .nav-right         {float: right}
.chunk-nav-hrz-fxd a                  { margin-bottom: 0; padding: @baseline/2 @baseline}
.chunk-nav-hrz-fxd a:hover            {text-decoration: none}
.chunk-nav-hrz-fxd a:last-child       {border-right: 0}

Before window resize with extra space:

enter image description here

After window resize with space somehow being removed:

enter image description here

possible duplicate of [Why is there a gap between image and navigation bar](http://stackoverflow.com/questions/21290481/why-is-there-a-gap-between-image-and-navigation-bar) — Hashem Qolami, Mar 19 '14 at 13:09

Bradley Trager · Accepted Answer · 2014-03-19T13:16:17.387

3

Your nav elements use <a> tags which have a default display of inline, so your whitespace is being counted.

See this fiddle. Where I removed all the whitespace between your HTML tags.

edited Mar 19 '14 at 13:16

answered Mar 19 '14 at 13:02

Bradley Trager

3,570
3
26
33

I'm still seeing the whitespace in the fiddle. – Daniel Schwarz Mar 19 '14 at 13:04
Which white space are you referring to? – Bradley Trager Mar 19 '14 at 13:05
@BradleyTrager Maybe the whitespace between links 5 and 6? – TylerH Mar 19 '14 at 13:08
This does seem to have done the trick, but could you explain where abouts I had set the inline-block? Thanks! – Alex Mar 19 '14 at 13:08
@Alex `.img-thumbnail {}` had `display: inline-block;` set. – TylerH Mar 19 '14 at 13:10
in `chunk-nav-hrz-fxd nav` – Ryan B Mar 19 '14 at 13:10
Sorry, there's a border-right which has the same colour as the background which made it seem as if there were 1px of whitespace, my bad. – Daniel Schwarz Mar 19 '14 at 13:11
The edited answer explains perfectly, thank you for clarifying Bradley. – Alex Mar 19 '14 at 13:13
I actually edited it again because I realized the inline display was just coming from the tags by default. But still the same idea. – Bradley Trager Mar 19 '14 at 13:17

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

Your element are inline block, which give the roperties of block element and inline aswell.

One of the inline property is the white space character. When the HTML is compiling. it compile every whitespace character into a single whitespace (with the exception of pre elements). Return character, tabulation and space are all compiled as whitespace and create the visible space. See this fiddle to see the said behavior.

But you resize function is using DOM manipulation method. When using those methods, it does not create the new line character or the tabulation like your source code. And this is why the whitespace aren't shown after resize.

Solution : trigger the resize

$(window).smartresize(function () {
    checkSize()
}).trigger('resize');

http://jsfiddle.net/DjftP/1/

Extra space between nav links

2 Answers2

Solution : trigger the resize