How do I remove the white space between divs that are inline-blocks?
Asked by
jhbao (
212
)
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: http://www.onevietnam.org/demo/toggle2.php
Observing members:
0
Composing members:
0
6 Answers
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.
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.
Either set the particular DIV’s styles to
div.thisdiv
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.
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.
@jhbao You fixed it, correct? I’m pretty sure the buttons were spaced apart when I first looked.
@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 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
