Line-breaks between divs render a space. How to eliminate it from HTML?

Question

I have the following layout

<div style="width:100px">
    <div style="width:50%; display: inline-block;">
        div1
    </div>
    <div style="width:50%; display: inline-block;">
        div2
    </div>
</div>

because in html there's a change-line between closing and opening div (div1 and div2), browsers add a "space" character in place of the line-break which results in having the second div to display underneath the first div.

However if you remove the \n between the div1 and div2 then they display next to each other which is the expected behaviour.

<div style="width:100px">
    <div style="width:50%; display: inline-block;">
        div1
    </div><div style="width:50%; display: inline-block;">
        div2
    </div>
</div>

However this makes code looks ugly. I am currently using <DOCTYPE html>. I have also tried switching to XHTML but didn't work. I am pretty sure there's some way of eliminating this behaviour of line-breaks, any ideas?

FYI: I do not want to use float or parse my html output in php during rendering to remove the line-breaks.

Answer 1

One more possible way is to set the font-size of the parent to zero and then set the font-size of child elements to whatever you need. Like:

#mybar { font-size: 0; }
#mybar span { font-size: 14px; }

However, you have to be aware that font-size = 0 is displayed different depending on the browser: http://webdesign.about.com/od/fonts/qt/tipfont0.htm

I tested in Firefox and works as expected. If I remember correctly, the minimum font size can be also set depending on the browsers, so, it may not be consistent.