Why is the background sometimes displayed and sometimes not?

Question

I have CSS that underlines certain words.
Later I found that it didn't appear in the space.
I found that on the sample HTML, the underline is displayed between the upper example, but not between the lower example.
Why isn't the space below underlined?


  
    
    
  
  
    example example
    
    
      example
       example

user_8202850 · Answer

On your code, whitespace in span is ignored when compiling html codes. You need to use to represent the whitespace only.


  
    
    
  
  
    example example
    
    
      example example

user_3754372 · Answer

It's because CSS processes multiple whitespaces into single space and space after newline character are both considered whitespace and hence reduced to single whitespace and 2nd whitespace is deleted. Contrast your code to below.


  
    
    
  
  
    example example
    
    
      example 
example

Also checkout https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace for more info.

You can use if it's just your inserted data but presumably it's coming from a different source

You are probably better off using white-space:pre; as below


  
    
    
  
  
    example example
    
    
      example
       example
    
    
      example
       example

Why is the background sometimes displayed and sometimes not?

2 Answers