vertical-align-negative-leading-001-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

.container {

  margin: 30px 0;

  color: orange;

  background-color: blue;

  line-height: 10px;

  font-size: 30px;

  font-family: Ahem;

.lh20 { line-height: 20px; }

.lh30 { line-height: 30px; }

.up5 { position: relative; top: -5px; }

.up10 { position: relative; top: -10px; }

.down5 { position: relative; top: 5px; }

.down10 { position: relative; top: 10px; }

</style>

<body>

<div class="container">

  <span>XX</span>

  <span>XX</span>

  <span>XX</span>

</div>

<div class="container lh30">

  <span class="up10">XX</span>

  <span>XX</span>

  <span class="down10">XX</span>

</div>

<div class="container"><span>XX</span></div>

<div class="container"><span>XX</span></div>

<div class="container lh20"><span class="up5">XX</span></div>

<div class="container lh20"><span class="down5">XX</span></div>

</body>