title: Remove space below the text baseline with CSS
body: <p>Lately I've been working with Japanese text, and I've found a rather annoying property. In Japanese, unlike English, glyphs do not extend below the text baseline. This example should show what I mean:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    font-size: 72pt;
    display: inline-block;
    text-decoration: underline;
    border: 1px solid red;
    margin: 10px;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div lang="ja"&gt;日本語&lt;/div&gt;
  &lt;div lang="en"&gt;English&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Notice how the "g" in "English" extends below the underline, but none of the characters in 日本語 do. This is typical of Japanese text. Despite this, space is still reserved below the underline, and in fact on my screen the Japanese text reserves <em>more</em> space than the English text does. My question is this:</p>
  
  <p>Is there a way to remove this space with CSS which is reliable across changing fonts and font sizes? I can see at least two possible approaches:</p>
  
  <ul>
  <li>Remove the space below the baseline directly. </li>
  <li>Move the baseline to be at the bottom of the containing box.</li>
  </ul>