A O A O - 1 month ago 9
CSS Question

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

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:

enter image description here

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

enter image description here

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

Answer

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.