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

Navigation
6

I'm developing a layout and when I put two buttons side by side, an "o" element is created in my HTML, which makes the spacing between the two, I could solve by creating a margin negative on the left, however I would like to know if this "o" element is a bug / html feature. I could not find anything on the internet about. If I delete this element, that space goes away and my buttons stick together like I want it to. Follow the DotNetFiddle link:

DotNetFiddle

I noticed, that "o" appears in the firefox preview, but not in google chrome.

    
asked by anonymous 12.06.2017 / 17:38

2 answers

12

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

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

By default, the buttons display inline , however there is a line break (which is a whitespace ) between them, so the Firefox inspector displays this symbol indicating the line break :

Thishelpsyoudebugelementspacinginline.Itgetsbrighterwhenusedwithpictures.Seetheexamplebelowwheretherearetwoimagesdefinedonseparatelines.Whenrendering,therewillbeaspacingbetweenthem,evenifyoudonothavethisdefinitioninCSS.

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

Now, if the images on the same line are defined, the spacing ceases to exist. Usually we do the first form, because the code is more readable, but since we do not define CSS, we do not expect such a spacing. In this way, the Firefox inspector helps us find the source of this behavior. 

<img src="http://lorempixel.com/100/100"/><imgsrc="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:

The spacing will still exist because it is the default button style.

    
12.06.2017 / 19:03
7

Second this Firefox Nightly this o is automatically generated by the browser when analyzing your Html and finding spaces in white.

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:

Greennodescanhavewidthandheightotherthan0,whichcangenerateundesirablespacingintheirlayout,thisoisusedtohelpdebugging,makingiteasiertosearchforthosepoints

ImageSource: link

    
12.06.2017 / 19:02
Change date="" value of tooltips if they are displayed at resolution lower than 767px? Updates and changes to the App version