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

Question

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

inline-block,makes span to behave as block element so thats why it will have width and height — Geeky, Oct 27 '16 at 18:50
But where does the extra width and height come from? I have a string of characters, split into spans. But when I set `inline-block`, the string increases slightly in height and width, as if there was some kind of padding added inbetween the blocks — A O, Oct 27 '16 at 18:53
when a span is made as inline-block and when no height and width is given,width would be the span's content width and height would be span's content height ,if no content is specified i guess width and height would be 0 — Geeky, Oct 27 '16 at 18:58

score 2 · Accepted Answer · answered Oct 27 '16 at 19:00

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.

This helped me find the solution. I had `span` elements everywhere, and had inadvertently changed all of their `display` attributes. I just set a class on the `span` elements that I wanted to change, and applied the display to that class. Everything looks as it did before now, thanks! — A O, Oct 27 '16 at 19:12

score 1 · Answer 2 · answered Oct 27 '16 at 18:54

As inline-block makes your span to behave as block element it will have width and height

you may consider using display:flex for this

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

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

Hope this helps

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

2 Answers2

Linked