I wrote a mini-game in javascript and ran into this problem. I wanted the cells of the playing field adjoined to each other (so that there was no playing field in the form of “cells”, where the cells are separated by borders). When I create block elements with inline-block elements, they have both the properties of inline elements and block ones. And the lowercase elements have the concept of "distance between the lines." Plus, even the lower-case elements have a line break, this is a space, which can also visually indent. It turns out that there are special line spacing in CSS, which is governed by the CSS line-height property. Never heard of them. Applied line-height: 0px, and the problem was solved - the gaps between the lines "collapsed."
On the second part of the question, namely
2. Why does the browser cram extra text nodes between my nodes? For some reason, the developers came up with it. I will answer myself.
The browser regards any characters (numbers, letters, space, line breaks, tabs ...) that are not in the element as a text node. In my HTML document * everything is displayed on the screen: (except for service elements), and when I enter some characters outside the service elements, the browser thinks “Aha, he wants me to display them. Stop, but they are not inside the element, then I will display them as a plain text node (for which the prototype object is the Text prototype object) ”. I used to face a similar situation, but did not understand why. For example, I write code:
… <body> Привет <div>123</div> …
This text “Hello” was just stuffed into such an object as a text node. Therefore, “Hello” was displayed on the screen, although I thought “Why is it output, is it not in the element?”. But remember that text and text are different (this is written in the next JavaScript course). This hello node object has a Text prototype object. If I create an object variable using a javascript using the String () constructor function, then this object has a prototype object (and therefore, the properties and methods are completely different) is completely different - String {...}. That is, the entire markup of the unofficial part of my HTML document, along with the characters between the markup elements themselves (space, tabulation, line breaks ...), is regarded by the browser as what I want to display on the screen , converted into DOM tree node objects (emphasize it is exactly the NODE objects - they are displayed on the screen , and not just the objects of the BOM tree) and are woven into the BOM. I wrote “intertwined”, since intermediate container objects (“knots”) are also created - for example, if I write an element div with id = ”first”, and throw two more div elements into it, then in BOM there are two corresponding div objects will not lie on the first level of nesting, but on the second in relation to the first div object - in the “more ordered” mediation object referenced by the property
document.getElementById(“first”).childNodes;
. Plus, the stylistic part of the content of my HTML document forms another tree — the CSSOM tree, which also “weaves” (embeds) into the BOM. This is a tree of objects that are not displayed on the screen (and help the browser understand how to display DOM node objects that are displayed on the screen). DOM and CSSOM trees are part of a common BOM tree. When I write markup, I format it for readability — I make tabs, I can also add spaces and line breaks between elements . These tabs, spaces, and line breaks are the browser and surpasses DOM text nodes. For example, if I write this code:
<!DOCTYPE HTML><html><head><style>.qq{width:100px;height:100px;border:1px solid black;}</style></head><body><div class="qq" id="first">1</div><div class="qq" id="second">2</div></body></html>
That is, the code without tabs and line breaks , these mysterious text objects-nodes of the DOM tree will disappear (if you take, for example, and see the “more ordered” object-list of objects-nodes-children of the body-node from the code above, then there will be only two div objects, and there will be no more text node objects). But this code is unreadable at all, so you need to either delete them or set them font-size: 0px. Plus, it is also necessary to remember that if my node object is an inline-block, then it obeys the laws of lines — this object is treated as a letter . For example, it appears upper line indent, and to remove it, you need to write line-height: 0px.
inlineelements. - Grundy