relationship between display and skew button

Question

I am trying to skew a button. But the text was also affected by skewing. Therefore, I gave the opposite angle(-21deg to 21deg) to the span that contains the text.

I gave -21deg to .signin-btn and 21deg to span to reformat the text inside span to the right place that .signin-btn as affected.

However, it didn't work right away. But, it is working well when I added display: inline-block; Can you tell me why it is working when display: inline-block; is inserted?

Thank you

.signin-btn {
        width: 120px;
        height: 35px;
        border-radius: 2px solid red;
        background-color: transparent;
        transform: skew(-21deg);
        border: 1.5px solid rgb(253, 101, 0);
        color: rgb(1, 2, 37);
        font-style: normal;
    }
    span {
        display: inline-block;
        transform: skew(21deg);
    }

<button class="signin-btn"><span>Sign in</span></button>

score 0 · Answer 1 · answered Jan 21 '22 at 03:23

By default "Span" tag display value is inline.

with display: inline; doen't calculate any other value so when you are doing transform: skew(21deg); so it is not working without display: inline-block; or block level

Please read below url you have got proper idea about that ref

relationship between display and skew button

1 Answers1