I was doing an organization on some code here before commitar and realized that an indentation in HTML caused a problem in my layout, so I went to inspect to find out what I had done wrong besides indenting, and found that the line breaks for indentation they ended up increasing the space between 2 elements.
Here is an example that demonstrates the same indented and inline html structure (also here ):
<div style="font-size: 44px;"> <span>28.3</span> <span>km</span> </div> <div style="font-size: 44px;"><span>28.3</span><span>km</span></div>
- Why does this occur?
- How to indent my code and not have this space?
According to W3 , all of the characters below are considered whitespace.
- ASCII space (
- ASCII tab (% with%)
- ASCII form feed (
- Zero-width space (
A line break is defined as
​ ( Carriage return ) and
( Line Feed ). And that also makes it a blank space.
The ISO-8879 specifies that a line break immediately following a start mark should be ignored, as well such as a line break just before the closing of a tag .
Note 1: Although there is a blank + line break (which is also considered white space), the browser ends up condensing those characters. It is the same as
and output is
Note 2: Note that browsers interpret all HTML elements except
a band elements with css
In reality it is exactly because of the indentation that occurs the spacing, because if you observe well is being generated a space, the browser rendering html engine ignores the additional spaces (when there is more than 1 space), but still the first one is rendered, the ideal when you do not want the space to be placed on the same line:
<div style="font-size: 44px;"> <span>28.3</span><span>km</span> </div>
This eliminates the problem.