Line breaks in HTML wrecks labels' horizontal size and spacing

[Yardboy]

The two snippets below are identical except for the line breaks around the content, yet they produce different output in the browser. The line breaks in the second snippet affect the horizontal spacing of the labels, as shown in the images below.

It specifically seems to be related to the line break that comes AFTER the content, as demonstrated here: http://jsbin.com/dufiquge/1/edit?html,output.

<div class='label label-primary'>label 1</div>
<div class='label label-info'>label 2</div>
<div class='label label-success'>label 3</div>

<div class='label label-primary'>
  Label 1
</div>
<div class='label label-info'>
  Label 2
</div>
<div class='label label-success'>
  Label 3
</div>

[cvrebert]

You should be using spans instead of divs.

[twbs-lmvtfy]

Hi @Yardboy!

You appear to have posted a live example (http://jsbin.com/dufiquge/2), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might be causing your issue:

• line 58, column 11: Stray end tag span.
• line 84, column 7: End tag for body seen, but there were unclosed elements.
• line 29, column 27: Unclosed element div.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[Yardboy]

Thanks, you're right I should be using spans instead of divs.

However, the problem exists with spans as well: http://jsbin.com/dufiquge/2/edit?html,output

[mdo]

Labels are inline, and this is just how the browser is rendering the white space in your code. It's no different for any other element as far as I know.

[Yardboy]

However, it's not just white space/spacing - look at the blown up image in the OP above, the horizontal size of two of the labels actually changes. It seems to be specifically related to the line break, see this version of the jsbin where I've removed all white space on the problem code except for the line break: http://jsbin.com/dufiquge/4/edit?html,output

[mdo]

Yeah, it's where the white space from how HTML is rendered is applied. When there are line breaks within the opening and closing tags, it's within. When there are no line breaks around the inner content, the white space is on the outside.

[mdo]

Going to punt this to v4. I want to rework labels—the inline behavior for them is just causing all sorts of problems.

[Yardboy]

Okay, I appreciate you taking a look.