Question

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

span {
  display: inline-block;
}

但是一旦我应用了这个属性，整个范围就会改变。

您需要注意的是，在我设置之前，<span>元素会自动计算尺寸：

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

为什么会这样？有没有办法可以在inline-block没有<span>更改尺寸的情况下应用cmd.Transaction？我无法判断是否有填充/边距或其他任何应用但它肯定在移动

Answer 1

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

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

否则，在没有看到实际页面的情况下很难知道答案。

Answer 2

由于inline-block使你的span能够像块元素一样运行宽度和高度

您可以考虑使用display：flex for this

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助