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

[danielpox]

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..

[danielpox]

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

[Senff]

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

[enjay]

I think this wil be helpful https://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: https://css-tricks.com/forums/discussion/18595/displayinline-block-on#Item_17

[joshuanhibbert]

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.

[TheDoc]

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

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

[joshuanhibbert]

@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:

Home

About

Forums

How to join

Log out

​

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

[wolfcry911]

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

[danielpox]

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

[Senff]

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

[TheDoc]

@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.

[joshuanhibbert]

@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.

[wolfcry911]

you could always use floats ;)
j/k

[danielpox]

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

[joshuanhibbert]

@wolfcry911 I still do at times :)

[Author]

Posts