为什么应用`inline-block`在我的span元素上强制尺寸？ [英] Why does applying `inline-block` force dimensions onto my span element?

问题描述

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

  span {
 display：inline-block; 
} 
  

但是一旦应用此属性，

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

但是一旦设置了属性，尺寸就会被计算出来，自动计算：

为什么会发生这种情况？有没有方法，我可以应用 inline-block 没有< span> 改变维度？我不知道是否有填充/边距或任何应用，但它确实是移动

解决方案

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

inline-block 元素的一个不同之处在于它们在所有方向上的边距和填充都是可以遵守的，而 inline 元素只有水平边距和填充。因此，如果你在 span 上设置垂直边距/ paddings，这将解释为什么它被改变为 inline-block 。

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

So I have this <span> element, and I wanted to apply a webkit-transform to it. Unfortunately, I have to specify the display attribute to be inline-block in order for this to work.

span {
  display: inline-block;
}

But once I apply this attribute, the entire span shifts.

You'll note that before I set it, the <span> element has it's dimensions automatically calculated:

But once I do set the property, the dimensions are computed, and they are slightly different from what is automatically calculated previously:

Why does this happen? Is there a way I can apply inline-block without the <span> changing dimensions at all? I can't tell if there's padding/margins or whatever being applied but it definitely is moving

解决方案

Normally changing an element from inline to inline-block will not automatically change its size, even though the computed width and height change from auto to numbers.

One thing that's different for inline-block elements is that their margins and paddings in all directions are respected, while inline elements only have horizontal margins and paddings. So if you set vertical margins/paddings on the span, that would explain why it is moving after being changed into inline-block.

Otherwise, it's hard to know the answer without seeing the actual page.

这篇关于为什么应用`inline-block`在我的span元素上强制尺寸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！