CODEWITHSUNDEEP
css
Tie Zhong
Tie Zhong

Reputation: 19

Chrome bug? New line wraps the next element

I think theoretically raw new line in html should not be rendered, or affect the layout anyway, but i Chrome seems like it does: http://jsfiddle.net/tzhong/4Nhb7/2/

The link works fine in Firefox and IE(only have 10 tested), but not in Chrome and Safari.

Is this a known WebKit bug?

HTML:

<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<p></p>

<div class="container">
<div class="left">Left</div><div class="right">Right</div>
</div>

CSS:

.left {
    display: inline-block;
    width: 50px;
    background-color: blue;
}

.right {
    display: block;
    float: right;
    background-color: red;
}


.container {
    margin-top: 120px;
    background-color: rgb(83, 86, 90);
    color: rgb(255, 255, 255);
    display: inline-block;
}

Upvotes: 1

Views: 794

Answers (1)

brouxhaha
brouxhaha

Reputation: 4093

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

inline-block elements add whitespace between elements if there is space in the html.

With the elements set to display: inline-block, this will cause whitespace to appear.

<div class="left">Left</div>
<div class="right">Right</div>

Your second set of code is one fix - remove the whitespace between elements:

<div class="left">Left</div><div class="right">Right</div>

Which can also be done with comments like so:

<div class="left">Left</div><!--
--><div class="right">Right</div>

Or, probably the best solution is using font-size: 0 on the parent element, then resetting the font-size on the children, with a demo:

.container {font-size: 0;}
.left, .right {font-size: 16px;}

I looked at this in Firefox, and if you take float: right off .right, there is space in the first set of elements. So it appears that Firefox needs display: inline-block set on more than one element to create that extra whitespace.

Upvotes: 2

Related Questions