Why do line breaks between elements cause space between them?

Question

Why do line breaks between elements cause space between them?

Navigation

#1 by (5 votes)
#2 by (1 votes)

6

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>

Questions:

Why does this occur?
How to indent my code and not have this space?

html

asked by anonymous 16.02.2018 / 16:54

2 answers

Text Position in pie chart in ggplot2 DataTable does not sort correctly

score 5 · Answer 1

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 a b

Note 2: Note that browsers interpret all HTML elements except a b and elements with css <pre> .

References: ¹ link
² link

score 1 · Answer 2

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.