CODEWITHSUNDEEP
javascripthtmlreactjshtml-table
Ashraf
Ashraf

Reputation: 65

React span space in between text

I'm trying to add a space between span and text in React but it seems it behaves differently in JSX? here is the code

return(
    <div>
         <h1 className="navbar"> <span style={styles}> {timeOfDay} </span> 
          {`${firstName} ${lastName}`} It is currently {hours} clock</h1>
    </div>
    )

span As you can see {timeOfDay} which is good night is sticking to the text, what im trying to do is have a space between them, how can i achieve that in React?

Upvotes: 3

Views: 6048

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281656

There are multiple ways to add space between elements in JSX

  1. Use &nbsp; 
    return(
       <div>
         <h1 className="navbar"> <span style={styles}> {timeOfDay} </span> 
          &nbsp;{`${firstName} ${lastName}`} It is currently {hours} clock</h1>
      </div>
    )
  1. Use {' '}
    return(
       <div>
         <h1 className="navbar"> <span style={styles}> {timeOfDay} </span> 
          {` ${firstName} ${lastName}`} It is currently {hours} clock</h1>
      </div>
    )
  1. Use CSS(padding/margin to span)

Upvotes: 4

Related Questions