General Question

jhbao's avatar

How do I remove the white space between divs that are inline-blocks?

Asked by jhbao (212points) February 5th, 2010 from IM

I want to emulate the Google pill buttons and used much of their publiclly available code. But there’s still a 3 pixel white space between the buttons! I can’t figure out my css code at all! The code I’m working on:

Observing members: 0 Composing members: 0

6 Answers

HungryGuy's avatar

Are there any line breaks between your divs? Like, is your closing div on one line, and the next opening div on the following line? If so, the browser you’re using may see the CR/LF as white space and so putting a tny gap between the divs.

jrpowell's avatar

It seems to look fine in Firefox. Did you fix it or am I not getting what you want to do? Are you checking it in IE? <—That is always a bag of hurt.

ETpro's avatar

Either set the particular DIV’s styles to

border: 0;
margin: 0;

or set a master element at the top of your style sheet to that if possible, as in

border: 0;
margin: 0;

Your divs are probably inherting either a default border, margin or both from the browser’s built in style sheet.

phoenyx's avatar

Looks fine to me in firefox, safari, and chromium. Wanna give us a screenshot?

My guess is the empty text node bug in IE. Sometimes IE sticks text nodes in its DOM in places where there is whitespace between tags in the HTML.

jaytkay's avatar

@jhbao You fixed it, correct? I’m pretty sure the buttons were spaced apart when I first looked.

HungryGuy's avatar

@phoenyx – Yeah! That’s kind’a what I said. If there are ANY gaps (even just a CR/LF), some browsers will interpret that as whitespace between elements.

Answer this question




to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
Knowledge Networking @ Fluther