Multiple span tags under a div add extra spaces

Question

I'm trying to implement a typography animation, and in that regard, I have all the characters of the text in a <span> tag as shown below.

But, the output of the html is as shown in the image below, with extra spaces between my span elements. (Notice one extra element shown between each span)

.container {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 120px;
  font-weight: 900;
}

   

<body>
  <div class="container">
    <div class="text">
      <div class="text-row">
        <span>W</span>
        <span>e</span>
        <span>&nbsp;</span>
        <span>P</span>
        <span>r</span>
        <span>o</span>
        <span>v</span>
        <span>i</span>
        <span>d</span>
        <span>e</span>
      </div>
    </div>
  </div>
</body>

Can anyone explain why is this happening?

`inline` elements respect the whitespace between it and other `inline` elements. If you remove the whitespace/linebreaks in the source between each of the `span`s the whitespace in the final output will disappear. — Hidden Hobbes, Jun 25 '18 at 10:18

Shahil M · Accepted Answer · 2018-06-25T10:20:46.010

1

This is because span is an inline element. If you want to get rid if the white spaces use float property for the span items

span {
    float: left;
}

Go through the below source to explore more about display properties - https://css-tricks.com/fighting-the-space-between-inline-block-elements/

edited Jun 25 '18 at 10:20

answered Jun 25 '18 at 10:13

Shahil M

3,296
4
19
41

no need the display:block with float – Temani Afif Jun 25 '18 at 10:18
@TemaniAfif Thanks for correcting. – Shahil M Jun 25 '18 at 10:21
thanks for sharing the link – Vishal Sharma Jun 25 '18 at 10:31

score 1 · Answer 2 · answered Jun 25 '18 at 10:18

.container {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 120px;
  font-weight: 900;
}

.container .text .text-row span {
  
float: left;
   
  
}

   

<body>
  <div class="container">
    <div class="text">
      <div class="text-row">
        <span>W</span>
        <span>e</span>
        <span>&nbsp;</span>
        <span>P</span>
        <span>r</span>
        <span>o</span>
        <span>v</span>
        <span>i</span>
        <span>d</span>
        <span>e</span>
      </div>
    </div>
  </div>
</body>

score 1 · Answer 3 · answered Jun 25 '18 at 10:18

.text span {
    font-size: 60px;
    font-weight: 900;
    display: block;
    float: left;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

 <div class="text">
    <div class="text-row">
      <span>W</span>
      <span>e</span>
      <span>&nbsp;</span>
      <span>P</span>
      <span>r</span>
      <span>o</span>
      <span>v</span>
      <span>i</span>
      <span>d</span>
      <span>e</span>
    </div>
  </div>

</body>
</html>

Hope this will fix your problem

Multiple span tags under a div add extra spaces

3 Answers3