Why do line breaks between elements cause space between them?

Posted on

Question :

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;">

<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?

Answer :

According to W3 , all of the characters below are considered whitespace.

  • ASCII space ( &#x0020; )
  • ASCII tab (% with%)
  • ASCII form feed ( &#x0009; )
  • Zero-width space ( &#x000C; )

A line break is defined as &#x200B; ( Carriage return ) and &#x000D; ( 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 &#x000A; and output is a b


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

    ¹ link
    ² link


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;">

This eliminates the problem.


Leave a Reply

Your email address will not be published. Required fields are marked *