0

I am making a navigation with menu items positioned in one line:

<div class="wrapper">
  <div class="tt-inl-wrap">

     <a class="tt-inl-bl" href="/">Home</a>
     <a class="tt-inl-bl" href="/">Club</a>          

  </div>
</div>

Here is the css:

.wrapper { width: 100%; max-width: 1240px; min-width: 350px; padding: 0 30px; margin: 0 auto; }

.tt-inl-wrap { font-size:0px !important; }
.tt-inl-wrap > * { font-size:initial; }
.tt-inl-bl { display:inline-block; }

As you can see I am setting a font size of the wrapper of inline elements (.tt-inl-wrap) to 0px in order to eliminate horizontal spaces between inline items. But there is also an unexplicable vertical empty space at the bottom of .tt-inl-wrap element (inline elements have 50px height while wrapper has 55px), see images: wrapper

inline element

I've seen this weird vertical gape of a wrapper of inline elements many times before, but never understood the cause.

Is there an explanation for this vertical whitespace?

Incredible
  • 163
  • 11
  • Play with `line-height`. In my opinion, that's the most effective way for vertically-centering single-line elements (such as horizontal navs) – Wes Foster Jul 26 '16 at 15:00
  • I believe you're confusing horizontal and vertical. Vertical goes up and down while horizontal goes left and right. Are you talking about removing the space above and below the inline elements, or the space between the inline elements? – Quiver Jul 26 '16 at 15:01
  • I think that space comes from another inheritance element. If you try just this code, it will work. – Jordi Flores Jul 26 '16 at 15:03
  • It appears you're encountering *descender* space, a feature of inline-level elements: http://stackoverflow.com/a/36975280/3597276 – Michael Benjamin Jul 26 '16 at 15:03
  • I did. I sat line-height of all the elements to 50px but with the same result. – Incredible Jul 26 '16 at 15:03
  • 1
    @Quiver I don't think so: *"vertical empty space at the **bottom** of .tt-inl-wrap element"* – George Jul 26 '16 at 15:04
  • @George Thanks, I didn't catch that. – Quiver Jul 26 '16 at 15:05

0 Answers0