7

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't show.but how about one line box and one block box?

I want the rule or specification, could you tell me?

lovespring
  • 19,051
  • 42
  • 103
  • 153
  • 3
    I bet that this particular subject makes for some thrilling reading in the HTML5 spec. I *suspect* that whenever an element's content can include CDATA, stray whitespace will become TEXT nodes, but still I think it's probably more complicated than that. – Pointy Jan 17 '11 at 15:12
  • ... for example, read the stuff about how `

    ` tags are supposed to work, particularly how they are implicitly closed. It's very hard to understand, at least for a dull-witted person like myself.

     – Pointy Jan 17 '11 at 15:15

2 Answers2

8

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!

Zak
  • 2,688
  • 4
  • 29
  • 45
  • 3
    That's all good information, though personally I try to minimize ` ` use in favor of CSS for spacing. – Pointy Jan 17 '11 at 15:17
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.

Stefaan Colman
  • 3,715
  • 2
  • 22
  • 11