跨度外的文本，从跨度轮廓偏移

Question

我正在建立一个受美国宪法启发的“我们人民”网站部分，我列出了支持我项目的“签名者”的名字。名称有不同的大小，我试图让它们在页面上很好地显示。奇怪的是，字体始终偏离包含名称的跨度。这就是我所拥有的：

如您所见，名称重叠，我想避免。我觉得奇怪的是文本超出了大纲轮廓：

所有名字都是如此。这是我的HTML：

   <div id="names">   
      <span class="order ten CalifornyaA-Bold" id="o3">Eric So</span> &nbsp;
      <span class="order twenty-five CalifornyaB-Bold" id="o5">Sierra Hansen</span> &nbsp;
      <span class="order ten CalifornyaB-Bold" id="o6">Eleanor Collier</span> &nbsp;
      ...
      <span class="order twenty-five CalifornyaC-Bold" id="o69">Maeve McCarty</span> &nbsp;
   </div>

...和CSS：

    #names {
      text-align: center;
      padding-bottom: 10%;
    }
    .hancock, .five-hundred, .two-hundred, .one-hundred, .fifty, .twenty-five, .ten {
      line-height: 1.5em;
      white-space: nowrap;
    }
    .hancock {
      font-size: 5.5em;
    }
    .five-hundred {
      font-size: 4em;
    }
    .two-hundred {
      font-size: 3.4em;
    }
    .one-hundred {
      font-size: 2.8em;
    }
    .fifty {
      font-size: 2.2em;
    }
    .twenty-five {
      font-size: 1.6em;
    }
    .ten {
      font-size: 1em;
    }

非常感谢任何帮助！

Answer 1

它是你的line-height因为它们是内联元素是一个无块元素，尝试修改值：

.hancock, .five-hundred, .two-hundred, .one-hundred, .fifty, .twenty-five, .ten {
      line-height: 110%;//percent would be good
      white-space: nowrap;
    }

或为每个规则添加单独的CSS规则，而不是全部设置为1.5em
修改
请记住，在使用em之后，将字体大小设置为父元素，检查我如何包装文本并在字体页面中的em中添加字体大小且不重叠：

Answer 2

你可以使用

span {line-height: 1.2;}

Answer 3

似乎display: inline-block然后设置margin-top效果相当好。我认为这是一个黑客解决方案，但它或多或少都有效。