html - 如何从跨度两侧删除空白？

Question

我有这段代码:

.title span {
  font-family: 'Gill Sans MT Pro Condensed', 'Gill Sans MT', 'Gill Sans';
}
.title .big {
  font-size: 250px;
}

.title .small {
  font-size: 60px;
}

<div class="title flex">
  <span class="big">1</span>
  <span class="small">st</span>
</div>

如何去除第一个 span 周围的大量空白区域？

这就是我想要完成的: Image1

但由于巨大的空白，这就是我所拥有的: Image2

JSFiddle:https://jsfiddle.net/vmn3bz0k/

Answer 1

例如，您可以使用相对位置，并将第二个跨度移近第一个跨度。像这样的东西:

.title .small {
  font-size: 60px;
  position:relative;
  left:-40px;
}

fiddle : https://jsfiddle.net/vmn3bz0k/1/