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>

如何删除第一个跨度附近的大量空白？

这是我要完成的工作： Image1

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

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

Answer 1

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

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

提琴： https://jsfiddle.net/vmn3bz0k/1/

Answer 2

这个问题有很多可能的答案：）我的正常方法是将第一个跨度的显示设置为display: inline-block，以便您可以设置该跨度的宽度。

如果您希望以这种方式进行控制，也可以在任一跨度上使用负边距进行游戏。

或者@hetious也有很好的解决方案！

我敢肯定，还有其他几种方法可以解决这个问题。编码愉快！

.title span {
  font-family: 'Gill Sans MT Pro Condensed', 'Gill Sans MT', 'Gill Sans';
}
.title .big {
    font-size: 250px;
    display: inline-block;
    width: 75px;
}

.title .small {
    font-size: 60px;
}

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

Answer 3

调整垂直对齐方式，行高和字母间距以控制空间：

.title span {
  font-family: 'Gill Sans MT Pro Condensed', 'Gill Sans MT', 'Gill Sans';
}

.title .big {
  font-size: 250px;
  line-height:0.9em;
  letter-spacing:-0.2em;
}

.title .small {
  font-size: 60px;
  vertical-align: top;
}

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

如何删除跨度两侧的空白？

3 个答案: