Grow your CSS skills. Land your dream job.

Help! “display: inline-block;” being mean..

  • # July 24, 2012 at 6:51 pm

    http://i.imgur.com/k1yqL.png

    There you have an image of my issue. See that navigation panel hanging below the header? You can clearly see that there’s a space between each link button. I really don’t want that! Please help..

    # July 24, 2012 at 7:07 pm

    Here is the code I’m using http://jsfiddle.net/ntQcV/

    # July 24, 2012 at 7:22 pm

    Any particular reason for making them inline-block and not just block? Either way, giving them float:left; will probably help.

    # July 24, 2012 at 7:28 pm

    I think this wil be helpful http://css-tricks.com/fighting-the-space-between-inline-block-elements/
    Also, I had a similar problem recently and there was a lively discussion of the relative merits of various methods here: http://css-tricks.com/forums/discussion/18595/displayinline-block-on#Item_17

    # July 24, 2012 at 7:52 pm

    This is one option you have to fix the problem:

    #menu {
    font-size: 0;
    }
    #menu a {
    font-size: 13px;
    }

    As you are using inline-block, the browser treats each inline block element as though it where a character in a sentence, giving it a little bit of space. The above trick removes that space so that inline-block elements sit right up against one another.

    # July 24, 2012 at 7:55 pm

    You’ll want to do something like this: http://jsfiddle.net/ntQcV/5/

    Make sure there are no spaces between your inline-block elements.

    # July 24, 2012 at 8:16 pm

    @TheDoc Do you find that using that technique is blurring the lines between content and style? For me, I would rather not have to alter my markup so that a CSS technique works. Either way, it is a valid solution, I’m just interested in your thoughts on the matter!

    With that being said, another, perhaps more readable option (valid in HTML5) is this:


    P.S. Can we just have a decent layout model that is widely supported already…

    # July 24, 2012 at 8:18 pm

    @Senff, if using floats, you don’t need display: block or inline-block – they’re both overridden by the float.

    # July 24, 2012 at 8:19 pm

    Thank you! It works just fine now, thanks again! :)

    # July 24, 2012 at 8:47 pm

    @wolfcry911 You’re right, of course. For some reason, I’m simply not able to remember that and I keep forgetting..!

    # July 25, 2012 at 12:42 am

    @joshuanhibbert something about doing font-size: 0; just doesn’t sit right with me. I get that it works, I just don’t think it makes sense when somebody is reading code.

    Either way, I updated a lot of the markup to remove the divs and spans that were in there.

    # July 25, 2012 at 12:51 am

    @TheDoc I know what you mean. I’m still torn on the best way to handle the white space, especially as I use ems fairly regularly.

    # July 25, 2012 at 9:22 am

    you could always use floats ;)
    j/k

    # July 25, 2012 at 6:40 pm

    Simply just put comments between the closing tag and the next opening tag! It fixed the issue for me! :)

    # July 25, 2012 at 7:08 pm

    @wolfcry911 I still do at times :)

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".