Unknown space between my list elements

Question

I am getting a space between my list elements and I can't figure out where it's coming from. Perhaps someone could help.

Here are some screenshots (notice the spacing):

I am using:

.j-tabs .j-tabs-nav { /* All tab elements */
    margin: 0;
    padding: 0;
}

.j-tabs .j-tabs-tab { /* Non-active, non-hover tab */
    display: inline-block;
    margin: 0;
    list-style: none;
}

Please include the HTML in the question alongside the CSS that's involved with this, rather than just posting screenshots. — TylerH, Apr 11 '16 at 02:09

score 0 · Accepted Answer · answered Apr 11 '16 at 01:06

I would recommend using flexbox for this or you can use one of the methods listed in the following codepen.

Flex box version:

ul.flexbox {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

http://codepen.io/chriscoyier/pen/hmlqF

This is kind of nuking the problem from orbit, really... – TylerH Apr 11 '16 at 02:14 — TylerH, Apr 11 '16 at 02:14

Unknown space between my list elements

1 Answers1