user profile image


  1. Hey Chris, I realize this is an old pen but with the font-size: 0 method you can reset the <li> back using font-size: 1rem instead of a px magic number. Slightly more elegant (until you have to shove in a px fallback).

  2. Hey Chris, good work here I've been pulling my hair out trying to get things nice and neat with no additional white space. However if you want say 4 columns that are spaced by a gutter of 16px, but then don't want to use a negative margin of say -4px you can use: width: calc(25% - 12px) - subtract the 4px using calc. And then use a margin-right of 12px. Obviously the 4px is added on so it makes up the total to 16px right margin.

  3. Another way would be to float the items to the left and add a clearfix to the parent ul

  4. About the margin trick, I suggest using .25em instead of 4px. Usually normal spaces in fonts are made to be exactly .25ems , so this could be more responsive approach. Reference:

  5. Negative margins work, but it seems like word-spacing may be exactly what we need:

    .parent { word-spacing: -0.5ch } /* or -0.25em for deeper support but less clarity */
    .item { word-spacing: normal }

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.