Menu
The below HTML:
<html>
<body>
<label>field a</label>
<input name="foo1" value=""/><br/>
<label>field b</label><input name="foo2" value="" /><br/>
</body>
</html>… renders the input of field a slightly off to the right due to the whitespace between the label and the first input element. However, looking at the DOM in Chrome I see this:
I.e. there is no representation of the text node in the DOM. Since the browser renders it with the extra space I think what's happenning is that a whitespace is indeed present in the DOM but the DOM viewer for some reason does not display it. If I understand correctly Firefox DevTools do in fact display whitespace text nodes (see this blog post). Is there anything similar for Chrome?
519
HTML adds "white space text node" after some elements ( all inline elements), because it considers the white space between these elements part of them and it preserves them. So you can remove white space in html source or with javascript: from the inspector see which element has nextSibling empty text node.
Whitespace refers to characters which are used to provide horizontal or vertical space between other characters. Whitespace is often used to separate tokens in HTML, CSS, JavaScript, and other computer languages.
To insert blank spaces in text in HTML, type for each space to add. For example, to create five blank spaces between two words, type the entity five times between the words. You do not need to type any spaces between the entities.
I don't think there is a way to display them in the DOM view.
However, I've noticed they are somewhat detectable in the Accessibility Tree:
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
