Bug 56613 – inline elements with padding in a table cell cause an unnecessary line break

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Philip Rogers]

Created attachment 86119 [details]
Test case of the bug

Nested span elements with padding appear to cause a wrapping table cell to force an unnecessary line break.

This was found when laying out several strings wrapped in spans all inside a table cell. When padding or margin was applied to the group (so that there is space to the left of the first element), the last element would fall onto a new line even though the table cell was wide enough to fit all the elements.

Consider the following markup:
<div style="display:table-cell"><span style="padding-left:6px"><span>A <span>B</span></span></span></div>

Webkit calculates the table cell width as 33px when the span's left padding is 6px, and 27px when the span's left padding is 0px. I think both of these are correct. When the padding is 6px, there is a linebreak after the "A ", but when the padding is 0px there is no linebreak. It appears that Webkit is correctly calculating the table cell's width, but inserts an unnecessary linebreak.

Expected: There should be no linebreak and "A B" should be rendered in the div.

Actual: There is a linebreak inserted after "A ", causing "B" to get bumped to the next line.

[Shane Stephens]

Do you know of any websites that are currently broken by this?

[Philip Rogers]

(In reply to comment #1)
> Do you know of any websites that are currently broken by this?

The bug was encountered while developing the change history portion of adwords (there is a series of checkboxes under a chart and one of the checkboxes would fall onto a new line) but was worked around before release.

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.