Line-breaks between divs render a space. How to el

问题:

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.

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

回答2:

Possible duplicate on Removing whitespace between HTML elements when using line breaks

You can either use float:left css style or just comment the spaces between tags:

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

Later edit: I think the css solution is to set font-size:0px; to the container div so:

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

should solve the problem.

Seen on CSS unwanted spacing between anchor-tag elements

回答3:

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.

回答4:

One way to fix it is to use "display: table-cell" instead of "display: inline-block".

回答5:

Other way (that I sometimes do), is to remove that space controlling the margin:

#mybar span { display: inline-block; }
#mybar span:not(:first-child) {
    margin-left: -4px; /* Adjust accordingly */
}