title: Text Align Property is not working for Span Tag
body: <p>There is section inside which i have defined <code>text-align</code> as <code>left</code> for a line but its not taking effect for some reason </p>
  
  <pre><code>&lt;section id="topic1"&gt;
  This is a centered Heading for Topic 1&lt;br&gt;
  &lt;span class="text"&gt;This is a left aligned line&lt;/span&gt;
  &lt;/section&gt;
  </code></pre>
  
  <pre><code>section {
    text-align: center;
    height: auto;
    width: 100%;
  }
  
  .text {
    display: inline-block;
    text-align: left;
  }
  </code></pre>
  
  <p><strong>I tried <code>display: block</code> for text <code>span</code> tag in above code and text got aligned to left but i am looking for a alternative way to do this</strong></p>
  
  <hr>
  
  <p><strong>Reason for finding alternative way</strong> - Even tho block display is aligning text to left , keeping display as block for all the span tags within my webpage increases the  space between each span tag for some reason </p>
  
  <p>Practical example below</p>
  
  <pre><code>&lt;span class="text"&gt;This is line 1&lt;/span&gt;&lt;br&gt;
  &lt;span class="text"&gt;This is line 2&lt;/span&gt;
  </code></pre>
  
  <pre><code>.text {
    display: block;
  }
  </code></pre>
  
  <p>If you check output of above code there would be space between line 1 and 2 because of display block .
  I am okay with using <code>display : block</code> to make <code>text align</code> work for <code>span</code> tag </p>
  
  <p>But then this unnecessary space created by block display bothers me </p>
  
  <p>Isn't there any way to avoid that unnecessary space ( seen between line 1 and 2 ) created while using block display </p>