New Lines in HTML

Question

I am curious as to how browsers interpret line breaks in HTML and how this translates into white space in the rendered markup. For example consider the following two divs:

<div> <select> <option>one</option> </select> <input /> </div> <div> <select> <option>one</option> </select><input /> </div>

The first div will have more white space between the select and input elements because the line break between them is being rendered into white space; seen here. I am curious as to the reason behind this and what the best method to avoid this extra spacing while maintaining readable HTML is as I do not feel that the second div is very readable.

If at least one white-space character appears between two HTML elements in the HTML source code, the browser will create a TextNode between those two elements in the DOM. — Šime Vidas
– Šime Vidas, Commented Jul 12, 2013 at 15:12

Pevara · Accepted Answer · 2013-07-12 15:25:44Z

1

Any whitespace in html, including 40 empty characters, will be interpretted as one ' ' character. So a line break and 500 spaces will still display as one space. The best way to avoid the spacing is with css:

select{float:left}

http://jsfiddle.net/FSnhH/4/

edited Jul 12, 2013 at 15:25

Pevara

14.3k1 gold badge37 silver badges49 bronze badges

answered Jul 12, 2013 at 15:13

bluetoft

5,4432 gold badges25 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rpf3 Over a year ago

Yeah floating the select would fix this, it just seems like a weird thing to have to do. I noticed it when I went to append a third div created in JavaScript and the rendered white space was different

bluetoft Over a year ago

You wouldn't have to float necessarily... just use css to format your rendered/generated html

rpf3 Over a year ago

How could CSS besides float deal with the fact that there is a rendered text node in between the elements?

Alohci Over a year ago

@rpf3 - word-spacing and letter-spacing are sometimes used, See css-tricks.com/fighting-the-space-between-inline-block-elements for a run-down of the most common solutions.

Collectives™ on Stack Overflow

New Lines in HTML

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related