title: How to change line height of <br> and <span> elements?
body: <p>The code below puts extra space between <em>some text</em> and <em>again some text</em>.   </p>
  
  <ul>
  <li><p>Why is the <code>&lt;br&gt;</code> element between  <code>some text</code> and <code>again some text</code> not getting 0 height. I tried both <code>line-height: 0</code> and <code>height: 0</code>.</p></li>
  <li><p>The second <code>span</code> element's text in not taking 20px line-height, why?</p></li>
  </ul>
  
  <p><strong>Note:</strong> Please do not tell how to solve the problem. I only want to know why <code>line-height</code> works on <code>inline</code> elements like <code>span</code> this way.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    border: 1px solid black;
  }
  .one {
    line-height: 12px;
    font-size: 10px;
    vertical-align: top;
  }
  .two {
    line-height: 20px;
    vertical-align: bottom;
    font-size: 10px;
  }
  br {
    line-height: 0;
    height: 0;
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;span class=one&gt;
      some text &lt;br&gt;
      agian some text &lt;br&gt;    
    &lt;/span&gt;
    
    &lt;span class="two"&gt;
      hip hop
    &lt;/span&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>