Line-breaks between divs render a space. How to eliminate it from HTML?
html, line-breaks, tags
Solution
I think the only actually good solution is to switch divs with list
<ul style="width:100px">
<li style="width:50%; display: inline-block;">
div1
</li>
<li style="width:50%; display: inline-block;">
div2
</li>
</ul>
typically 'reseting' the list properties will make it look like a div. The benefit is that browsers will not generate space between `<li>` items.
Problem
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.