You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: files/en-us/web/css/css_text/whitespace/index.md
+7-9Lines changed: 7 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,11 +17,16 @@ CSS also defines the concept of _segment breaks_, which in the context of HTML a
17
17
18
18
## How does HTML process whitespace?
19
19
20
-
**HTML generally does not ignore whitespace.** As a markup language, HTML produces a {{glossary("DOM")}} where all whitespace in the text content is preserved. This is how CSS, a downstream rendering engine that works on the DOM, lets us control how whitespace is displayed using the {{cssxref("white-space")}} property. Every single character of text content in the source code is represented in the DOM tree and can be retrieved and manipulated via DOM APIs such as {{domxref("Node.textContent")}}.
20
+
It is a common myth that "HTML ignores whitespace", which is untrue: **HTML preserves all whitespace text content as you wrote them in the source code.** As a markup language, HTML produces a {{glossary("DOM")}} where all whitespace in the text content is preserved, which can be retrieved and manipulated via DOM APIs such as {{domxref("Node.textContent")}}. If HTML strips whitespace from the DOM, then CSS, a downstream rendering engine that works on the DOM, would not be able to preserve them using the {{cssxref("white-space")}} property.
21
21
22
22
> [!NOTE]
23
23
> To be clear, we're talking about whitespace _between HTML tags_, which becomes text nodes in the DOM. Any whitespace _inside a tag_ (between the angle brackets but not as part of an attribute value) is just part of the HTML syntax and does not appear in the DOM.
24
24
25
+
> [!NOTE]
26
+
> Due to the magic that is HTML parsing (quote from [DOM spec](https://dom.spec.whatwg.org/#introduction-to-the-dom)), there do exist certain places where whitespace characters could be ignored; for example, whitespace between the `<html>` and `<head>` opening tags, or `</body>` and `</html>` closing tags. Here, we just focus on concrete, rendered text content.
27
+
>
28
+
> Furthermore, the HTML parser does [_normalize_ certain whitespaces](https://html.spec.whatwg.org/multipage/parsing.html#preprocessing-the-input-stream). It would replace CR (U+000D) and CRLF sequences with single LF (U+000A). However, CR characters can still be inserted into the DOM either via [character references](/en-US/docs/Glossary/Character_reference) or JavaScript, so the CSS whitespace processing rules still need to explicitly handle them.
29
+
25
30
Take the following document, for example:
26
31
27
32
```html
@@ -52,14 +57,9 @@ Note that:
52
57
53
58
Conserving whitespace characters in the DOM is useful in many ways, but it can also make certain layouts more difficult to implement and may cause problems for developers who want to iterate over DOM nodes. We'll look at these issues and some solutions later on.
54
59
55
-
> [!NOTE]
56
-
> Due to the magic that is HTML parsing (quote from [DOM spec](https://dom.spec.whatwg.org/#introduction-to-the-dom)), there are certain whitespace characters that could be ignored by HTML; for example, whitespace between the `<html>` and `<head>` opening tags, or `</body>` and `</html>` closing tags. Here, we just deal with concrete, rendered text content.
57
-
>
58
-
> Furthermore, the HTML parser does [_normalize_ certain whitespaces](https://html.spec.whatwg.org/multipage/parsing.html#preprocessing-the-input-stream). It would replace CR (U+000D) and CRLF sequences with single LF (U+000A). However, CR characters can still be inserted into the DOM either via [character references](/en-US/docs/Glossary/Character_reference) or JavaScript, so the CSS whitespace processing rules still need to deal with them.
59
-
60
60
## How does CSS process whitespace?
61
61
62
-
When the DOM is passed to CSS for rendering, the whitespace is largely stripped by default. This means that the way your code is formatted is not visible to the end user.
62
+
When the DOM is passed to CSS for rendering, the whitespace is largely stripped by default. This means that the way your code is formatted is not visible to the end user—creating space around and inside elements is the job of CSS.
63
63
64
64
```html-nolint live-sample___html-whitespace
65
65
<!doctype html>
@@ -71,8 +71,6 @@ This source code contains a couple of line feeds after the `doctype` and a bunch
71
71
72
72
{{EmbedLiveSample("html-whitespace")}}
73
73
74
-
This behavior ensures that whitespace characters in your code don't impact the layout of your page. Creating space around and inside elements is the job of CSS.
75
-
76
74
CSS ignores most, but not all, whitespace characters. In this example, one of the spaces between "Hello" and "World!" still exists when the page is rendered in a browser. CSS uses [a specific algorithm](https://drafts.csswg.org/css-text-4/#white-space-processing) to decide which whitespace characters are user-irrelevant and how they are removed or transformed. We'll explain how this processing works in the next few sections.
0 commit comments