Spaces

index.html

<h1>Space</h1>
<hr>
<ul class="space-list">
  <li><span class="space-character">&emsp;</span>Em space <span class="ratio">M</span></li>
  <li><span class="space-character">&#12288;</span>Ideographic space</li>
  <li><span class="space-character">&#8199;</span>Figure space</li>
  <li><span class="space-character">&ensp;</span>En space <span class="ratio">M/2</span></li>
  <li><span class="space-character">&emsp13;</span>Three-per-em space <span class="ratio">M/3</span></li>
  <li><span class="space-character">&puncsp;</span>Punctuation space</li>
  <li><span class="space-character">&nbsp;</span>Normal space <span class="ratio">M/4</span></li>
  <li><span class="space-character">&emsp14;</span>Mid space or Four-per-em space <span class="ratio">M/4</span></li>
  <li><span class="space-character">&thinsp;</span>Thin space <span class="ratio">M/5 or M/6</span></li>
  <li><span class="space-character">&#8198;</span>Six-per-em space <span class="ratio">M/6</span></li>
  <li><span class="space-character">&hairsp;</span>Hair space <span class="ratio">M/24</span></li>
  <!-- <li><span class="space-character">&#8287;</span>Medium mathematical space <span class="ratio">M &times; 4/18</span></li> -->
</ul>
<hr>
<div class="footnote">
  <p>I have used Times New Roman, since it has all the space characters</p>
</div>

myQbZo.markdown

Spaces

Width of different space characters such as Em space, en space, thin space etc.

A Pen by Saneef Ansari on CodePen.

License.

style.scss

body {
  padding: 1em;
  font-family: Times New Roman, serif;
}

.space-list {
  padding: 0;
  margin: 0 0 1em;
  li {
    margin: 0 0 .0625em 0;
    list-style: none;
    line-height: 1;
  }
}

.space-character {
  position: relative;
  top: -.25em; // 8px / 32px/
  background: red;
  margin-right: .25em;
  font-size: 2em;
}

.ratio {
  font-family: sans-serif;
  color: gray;
  letter-spacing: 1px;
}

.footnote  {
  font-style: italic;
  color: gray;
}

hr {
    margin: 0 0 2em 0;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}