为什么将 `inline-block` 强制尺寸应用到我的 span 元素上？

Question

所以我有这个 <span> 元素，我想对其应用 webkit-transform。不幸的是，我必须将 display 属性指定为 inline-block 才能使其正常工作。

span {
  display: inline-block;
}

但是一旦我应用了这个属性，整个跨度就会发生变化。

您会注意到，在我设置它之前，<span> 元素会自动计算其尺寸：

但是一旦我设置了属性，就会计算尺寸，它们与之前自动计算的略有不同：

为什么会这样？有没有一种方法可以在 <span> 完全不改变尺寸的情况下应用 inline-block？我不知道是否有 padding/margins 或正在应用的任何东西，但它肯定在移动

Answer 1

由于内联块使您的 span 表现得像块元素，它将具有宽度和高度

您可以考虑为此使用 display:flex

.container{
  display:flex;
  flex-direction:column;
}
.container span:first-child{
   -webkit-transform: rotate(2deg);
}

<div class="container">
<span>
  span1
</span>
<span>
  span2
</span>
</div>

希望对您有所帮助

Answer 2

通常将元素从内联更改为内联块不会自动更改其大小，即使计算的宽度和高度从 auto 更改为数字。

inline-block 元素的一个不同之处在于它们在所有方向上的边距和填充都得到尊重，而 inline 元素只有水平边距和填充。因此，如果您在 span 上设置垂直 margins/paddings，这将解释为什么它在更改为 inline-block 后移动。

否则，不看实际页面很难知道答案。

Why does applying `inline-block` force dimensions onto my span element?