What is the automatically created "o" element between my Buttons in HTML?

Asked

Viewed 210 times

5

I am developing a layout and when I place two Buttons on each other, is created an element "o" in my HTML, which makes the spacing between the two, I could solve creating a margin negative to the left, but would like to know if this element "o" is a bug/resource of HTML. I could not find anything on the internet about. If I delete this element, this spacing disappears and my buttons stick together as I want them to. Follow the Dotnetfiddle link:

Dotnetfiddle

I noticed, that the "o" appears in the firefox inspection, but in the google Chrome.

html firefox

2 answers

11


As commented, this is a Firefox debug tool that displays white spaces between elements that have display: inline by default, since spaces between these elements are treated by browsers as spacing. See example below:

<button>Botão A</button>
<button>Botão B</button>

Buttons, by default, are displayed inline, but there is a line break (which is a whitespace) between them, then the Firefox inspector displays this symbol indicating the line break:

inserir a descrição da imagem aqui

This helps you to do the element spacing debug inline. It becomes clearer when used with images. See the example below where there are two images defined in different lines. When rendering, there will be a spacing between them, even if you don’t have this definition in CSS.

<img src="http://lorempixel.com/100/100" />
<img src="http://lorempixel.com/100/100" />

Already, if the images of the same line are defined, the mirroring ceases to exist. We usually do it the first way, because the code is more readable, but since we don’t define the CSS, we don’t expect there to be such spacing. In this way, the Firefox inspector helps us to find the source of this behavior.

<img src="http://lorempixel.com/100/100" /><img src="http://lorempixel.com/100/100" />

If you set the buttons on the same line, you will see that the inspector does not display this character:

inserir a descrição da imagem aqui

Spacing will still exist because it is the default button style.

6

According to that one blog post Firefox Nightly that o is automatically generated by the browser when parsing your Html and finding whitespace.

Whenever Firefox encounters one of the following characters it will create a new node within the DOM:

  • "\t" TAB u0009
  • "\n" LF u000A
  • "\r" CR u000D
  • " "
  • SPC u0020

For example, given the following HTML snippet:

<!-- My document -->
<html>
<head>
  <title>My Document</title>
</head>
<body>
  <h1>Header</h1>
  <p>
    Paragraph
  </p>
</body>
</html>

firefox will generate the following structure:

Representação do DOM

The green nodes can have width and height other than 0, which can generate undesirable spacing in your layout, this o is used to aid in debugging, facilitating the search for these points

Image source: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM

Browser other questions tagged html firefox

You are not signed in. Login or sign up in order to post.