为什么将“内联块”强制尺寸应用于我的跨度元素？答案

【问题标题】：Why does applying `inline-block` force dimensions onto my span element?为什么将“内联块”强制尺寸应用于我的跨度元素？
【发布时间】：2016-10-28 03:00:22
【问题描述】：

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

span {
  display: inline-block;
}

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

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

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

为什么会这样？有没有办法可以应用inline-block 而无需<span> 改变尺寸？我不知道是否有填充/边距或任何正在应用的东西，但它肯定在移动

【问题讨论】：

inline-block，使 span 表现为块元素，这就是为什么它会有宽度和高度
但是额外的宽度和高度是从哪里来的呢？我有一串字符，分成跨度。但是当我设置inline-block 时，字符串的高度和宽度略有增加，好像在块之间添加了某种填充
当一个跨度作为内联块并且没有给出高度和宽度时，宽度将是跨度的内容宽度，高度将是跨度的内容高度，如果没有指定内容我猜宽度和高度为 0

标签： css display

【解决方案1】：

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

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

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

【讨论】：

这帮助我找到了解决方案。我到处都有span 元素，并且无意中更改了它们的所有display 属性。我只是在我想要更改的span 元素上设置了一个类，并将显示应用于该类。一切看起来都和以前一样，谢谢！

【解决方案2】：

因为 inline-block 让你的 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>

希望对你有帮助

【讨论】：