The white-space property between blocks
Is the CSS 'white-space' propert supposed to be able to affect the whitespace between block elements?
For example, in the document used as an example in "Whitespace in the DOM" as follows, there is whitespace between the </h1> and the <p>:
<!-- My document -->
<html>
<head>
<title>My Document</title>
</head>
<body>
<h1>Header</h1>
<p>
Paragraph
</p>
</body>
</html>
This whitespace is normally removed; for example, the XHTML spec says that a conforming user agent must meet all of the following criteria:
In elements where the 'xml:space' attribute is set to 'preserve', the user agent must leave all whitespace characters intact (with the exception of leading and trailing whitespace characters, which should be removed). Otherwise, whitespace is handled according to the following rules:
- All whitespace surrounding block elements should be removed.
- Leading and trailing whitespace inside a block element must be removed.
- Line feed characters within a block element must be converted into a space (except when the 'xml:space' attribute is set to 'preserve').
- A sequence of white space characters must be reduced to a single space character (except when the 'xml:space' attribute is set to 'preserve').
My questions are as follows:
If I use the CSS white-space property on the
<body>, should this be able to preserve the whitespace between block elements (e.g. between the</h1>and the<p>)? Or is whitespace between blocks always removed, with the white-space property only affecting whitespace within blocks?The XHTML spec says that a
<body>cannot directly contain PCDATA (i.e. text). Does that mean that whitespace (being a kind of text) that's a direct child of the<body>tag is always insignificant/ignored, and cannot be enabled via CSS? If yes and whitespace between the</h1>and the<p>in the above example were ignored because it's a direct child of the<body>, would/should that whitespace still be ignored if there were a<div style="white-space: pre">immediately within the<body>and enclosing all the other elements?The 'white-space' processing model starts with, "Any text that is directly contained inside a block element (not inside an inline element) should be treated as an anonymous inline element". What should I understand about pure whitespace (whitespace with no text)?
Is there a rule (and if so, where is this rule defined) about removing whitespace within inline elements? For example in the following sequence
<p>The <strong> lazy </strong> dog.</p>should the whitespace after the<strong>tag be removed? (The HTML 4 spec has a rule about this for line breaks; I was wondering whether this rule also applied to other, non-line-beak whitespace, and whether this rule is mentioned/defined/all开发者_如何学JAVAowed/assumed in any XHTML or CSS specification.)
Your questions sure peeked my curiosity. I can hopefully shed some light on them.
The XHTML schema states the following three elements as preserve:
STYLESCRIPTPRE
This means that all other container elements should have suppressed the whitespaces around them. Your Mozilla link ("Whitespace in the DOM") says:
In Mozilla, all whitespace in the text content of the original document is represented in the DOM...
This becomes apparent when running a test page with plenty of whitespaces and breaks. Viewing the generated code (You can do this using the Web Developer toolbar: select View Source - View Generated Source) reveals that "the text content" means everything inside the HTML root tag. So, in other words, there's only whitespace suppression on the outermost tag (HTML).
Running the same page in IE8 tells a slightly different story (view the generated source by pressing F12 and in the Developer Tools, press CTRL - G). They're not 100% conformant either, but way more conformant than Firefox. They're suppressing not only the HTML element, but pretty much everything else (as it should). They heed the SCRIPT and STYLE elements' preserve rule, but still leaves a break inbetween. In the body, it replaced multiple breaks with single breaks. Nested DIV tags (and their content text) on a single row was split up with breaks.
In short, both Firefox and IE8 are not conforming user agents.
And no, you can't suppress the whitespace between two tags with the white-space property (you probably could go about doing it with JavaScript/jQuery if you really wanted to). The white-space property specifies how to deal with whitespace in the content part of the element (e.g. white-space: nowrap prevents the text from wrapping).
加载中,请稍侯......
精彩评论