Get a free trial // Grow your CSS skills // Land your dream job

li adding unecessary space

  • # January 28, 2013 at 9:23 pm

    Hello, just recently found this site. It’s neat!

    So, I have an annoying problem:

    My lists add unwanted spacing in between the lines. I think it wants to ‘equal it out’ – Whatever it is, I want to get rid of it.

    Orange is the background color for the

      list, on a yellow div background, so you can see better.

      The HTML (look at source, I don’t know how to make it appear as code, it automatically formats):

      • (1) 5800PIR-RES Wireless Motion Detector
      • (3) 5816 Standard Wireless Door/Window Transmitters with Magnet and Spacer
      • (1) GSM Module
      • (1) 5834-4 Wireless Keychain Remote
      • (1) RJ31 jack and cord set
      • (1) Rechargeable Back-up Battery Pack
      • (1) 9VAC Transformer
      • (1) LYNX Touch Programming Guide
      • (4) Alarm Warning Decals
      • LYNX Touch User Guide

      The CSS:

      .productwrapper li

      width: 48%;
      float: left;
      margin-right: 4px;


      The Problem ( picture):

      See the annoying space? Tried some things such as making the

      • tags on the same line,
        didn’t work.

        It’s on wordpress in the text edit tab for the page, in case that makes a difference.

    # January 28, 2013 at 9:43 pm

    @Gingerbread Can you make a Codepen so it’s easier for us to see the problem?

    # January 28, 2013 at 9:47 pm

    @srig99, how do you do that? I clicked the ‘code’ button when I highlighted the html, but it formatted anyways.

    # January 28, 2013 at 9:53 pm

    @Gingerbread You don’t make a Codepen on the Forums itself. Go on [Codepen]( “Codepen”) and click New Pen at the top. Just type in your code and then save it, and share the link with us. Here’s a tutorial if you need any help: [Codepen Tutorial]( “Codepen Tutorial”). Tell me if you need any help!

    # January 28, 2013 at 9:54 pm

    @Gingerbread Also, if you need to type code into the comment box on the forums, just use regular code tags or just click “Code” on top of the comment box.

    # January 28, 2013 at 10:16 pm

    OK, thank you. The code tag seems to only work on the CSS for some reason, not the HTML. But that doesn’t matter.

    I made a codepen:

    Cool thing! Can you help?

    # January 28, 2013 at 10:41 pm

    @Gingerbread I just made this: using the tutorial that I found here:

    # January 28, 2013 at 10:53 pm


    Hello, thanks for the help!
    It actually works if I restrict the size to the original box I had, too, but once I replace it with my li list it does the same thing!

    # January 28, 2013 at 10:55 pm

    @Gingerbread So it works for you? All good? Anything else?

    # January 28, 2013 at 10:58 pm

    Not quite, it doesn’t work with my line items and still divides it in a strange way. I actually figured out now how to link to the original code I had, it’s here:

    I think it might have something to do with the ‘strong’ tags?

    # January 28, 2013 at 11:11 pm

    @Gingerbread Well, here’s the one without strong tags: and here’s the one with: They look fine to me. What about you? Is this what you wanted?

    # January 28, 2013 at 11:17 pm

    First of all, thank you for your patience.
    Second of all, the pages you linked claim there’s nothing there. :(

    # January 28, 2013 at 11:18 pm

    @Gingerbread Try now. Sorry for that!

    # January 28, 2013 at 11:22 pm

    Can you put it in a box with this size:
    height: 140px;

    It seems to be messing up with that size.

    # January 28, 2013 at 11:26 pm

    @Gingerbread Yeah, this is what I have: I don’t think this is possible with those dimensions because the ul needs more space to fit and also, if I try using overflow: scroll, it still needs more space ( So I think you need more space in order to successfully handle this.

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed