Question

垂直顶部对齐两个简单文本时出现问题。由于某种原因，有一个小差距...尝试填充，线高等，没有。任何有用的输入。

<span style="padding:0px;font-size: 48px;font-style: italic;font-weight: bold;"><span style="padding:0px;font-size: 30px;font-style: italic;vertical-align:text-top;">VITA</span>

VITA

https://jsfiddle.net/p64g800g/

非常感谢

Answer 1

使用font-size: 0px;作为父级，以便span之间的空格为width 0px。

使用此功能：

＆＃13;

<div style="font-size: 0px;">
  <span style="font-size: 30px;font-style: italic;vertical-align:text-top;">VITA</span>
  <span style="font-size: 40px;font-style: italic;vertical-align:text-top;">VITA</span>
</div>

＆＃13;

替代方案：浮动<span>

＆＃13;

span {
  float: left;
}

＆＃13;

<span style="font-size: 30px;font-style: italic;">VITA</span>
<span style="font-size: 40px;font-style: italic;">VITA</span>

＆＃13;

Answer 2

您可以在第二行更改行高。我会用div而不是另一个跨度来包装它们，但是这里没有这样做，因为它可能不适合你。

＆＃13;

.span1 {
  padding: 0px;
  font-size: 48px;
  font-style: italic;
  font-weight: bold;
}
.span2 {
  font-size: 30px;
  font-style: italic;
  vertical-align: text-top;
}
.span3 {
  font-size: 40px;
  line-height: 39px;
  font-style: italic;
  vertical-align: text-top;
}

＆＃13;

<span class="span1">
  <span class="span2">VITA</span>
  <span class="span3">VITA</span>
</span>

＆＃13;

Answer 3

您可以看到，<span>代码无法接受margin-top，margin-bottom，padding-top和padding-bottom。这是您应该开始考虑display属性的地方。

此处您需要的display是inline-block。使用此属性，您可以开始垂直移动<span>元素。

<span style="padding: 0px;font-size: 48px;font-style: italic;font-weight: bold;">
    <span style="font-size: 30px;font-style: italic;vertical-align: text-top;display: inline-block">VITA</span>
    <span style="font-size: 40px;font-style: italic;vertical-align: text-top;display: inline-block;margin-top: -4px">VITA</span>
</span>

顶部垂直对齐文本。

3 个答案: