文本未与大字体对齐

Question

I'm building a periodic table in HTMl/CSS and I cant get the text inside the large .element-symbol to align left with the .atomic-weight , .element-name and .atomic-symbol without an arbitrary text-indent . I guess this is just to do with the width of the letters, but is there a way of having the first letter in .element-symbol start hard left? ie against the red border

Markup:

<div class="cell">
  <div class="atomic-number"><span>2</span></div>
  <div class="element-symbol">      
    <abbr>He</abbr>
  </div>
  <div class="element-name"><span>Helium</span></div>
  <div class="atomic-weight">4.002602</div>
  </div>

CSS: (red borders to show alignment issue)

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  line-height: 1;
  }

.cell {
  border: 1px solid black;
  font-family: sans-serif;
  width: 280px;
  height: 280px;
  margin: 20px auto;
  padding:10px;
  background-color: #4DBCE9;
  }

.element-symbol {
 font-size: 173px;
 border: 1px solid red;
 font-weight: 400;
 /*text-indent: -12px;  dont want to use this*/
 }

.atomic-number, .atomic-weight, .element-name {
 font-size: 25px;
 border: 1px solid red;
 }

Example in codepen

Answer 1

Each glyph in a font, sits within a bounding box. The glyph is usually not hard up against any of the edges of that box, and each glyph (or letter) will have differing amounts of space around it to help space it naturally when it is combined with other glyphs to form words.

Have a look at http://www.freetype.org/freetype2/docs/glyphs/glyphs-3.html to get a feel for some of the intricacies of type design.

I'm not aware of any text or font properties in CSS that can eliminate that space, and in any case that space will be different for each glyph, and different between the same glyphs in different fonts.

Answer 2

You're right - it's simply because of the size of the letters.

In most fonts, each character has a small amount of whitespace to either side of it, to separate it from adjacent letters. Without this space the letters would just run in to each other. At large font sizes, this space gets to be fairly significant, and produces the effect you're seeing. The only other option would be to find (or create) a font that doesn't have that space (or perhaps only has trailing space after each letter and no leading space).