title: Controlling the vertical space of a character in HTML
body: <p>In the picture below, the 'A' and 'a' are occupying the same vertical space. </p>
  
  <p>Is is possible to change something so the 'a' occupies less vertical space? </p>
  
  <p>I want to get rid of the area circled in green. </p>
  
  <p><img src="https://i.stack.imgur.com/aLD0y.png" alt="enter image description here"></p>
  
  <p>I tried to play with line-height, but in vain.
  Also the margin and padding don't have any impact.
  Below the HTML:</p>
  
  <pre><code>&lt;svg height="800" width="800"&gt;
    &lt;text font-size="150px" fill="black" x="30" y="300"
          style="line-height: -10px;"&gt;A&lt;/text&gt;
    &lt;text font-size="150px" fill="red" x="130" y="300"
          style="line-height: 0em;"&gt;a&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Maybe there are fonts that can handle that but I couldn't find any of them.</p>
  
  <p>EDIT: I will integrate this text with a <a href="https://github.com/skokenes/D3-Lasso-Plugin" rel="nofollow noreferrer">lasso plugin</a> and want to avoid that the user selects the character 'a' by mistake by putting the lasso in the zone circled in green.</p>