About The Space And Line-break In Html Source Code

Sometimes, the space and line-break between two HTML tag will ignored by the browser, sometimes not. I feel that space and line-break between two line box show, two block box don'

Solution 1:

In general, browsers ignore extra white space (extra being more than one space).

If you have at least one space between two inline elements, then the browser will render one space (but only one space no matter how many you have). If you want more than one space to display, use the html character code  . That will render as many spaces as you need. (although as Pointy pointed out, it is much better to use CSS for spacing)

As for line breaks, some browsers (such as firefox) will treat a line break the same as a space (where one space will be added no matter how many line breaks you have). Other browsers, however, (such as internet explorer) will ignore the line break completely. To force browsers to render a line break, use the <br> tag.

I hope that cleared everything up!

Solution 2:

The specs say that all spaces, tabs and line-breaks are interpreted as a word separator. So no matter how many spaces, tabs and line-breaks you have it will only be rendered as a single space.

The only exception is the pre-tag. The spaces, line-breaks and tabs in a pre-tag are all shown. You can style every tag as a pre-tag by applying the rule white-space: pre.

Specs: http://www.w3.org/TR/html401/struct/text.html#h-9.1

For showing line-breaks the browser checks the type of the content (inline or block). If it's inline (strong, em, a, ...) it doesn't show an line-break. If it's a block (p, table, div, ...) it shows a line-break before and after the element.

Again with css you can change the block-type (with the display property) and so alter how your site looks.