span要素の幅（width）や高さ（height）を固定にする方法！

span要素の幅（width）や高さ（height）を変更して、固定にしたいという時があります。

しかしCSSでとある設定をしないとそれは実現できません。

では以下の項目でサンプルコードを用いて、span要素の幅や高さを固定する方法について見ていきましょう。

ではspan要素の幅や高さを固定にする方法について解説します。

まずHTML要素の幅や高さを変更する時に抑えておくべき項目があります。

それは要素のdisplayプロパティのデフォルト値についてです。

インライン要素のspan要素のdisplayプロパティのデフォルトはinlineです。実はdisplayプロパティの値がinlineだとwidthとheightで幅と高さの調整が出来ないのです。

widthプロパティとheightプロパティで幅と高さを調整するにはdisplayプロパティをinline-blockかblockにしましょう。これだけで幅・高さを調整できるようになります。

span要素のdisplayプロパティを変更した場合と、しなかった場合それぞれサンプルコードで挙動を確認してみましょう。

このようにdisplayプロパティを変更した、.block2と.block3のみwidthとheightが適用されていることが分かります。

.blockはdisplayプロパティの値がinlineのままで、幅・高さの調整が効かず今回は表示されていません。

最後に補足としてdisplay: inline-block;とdisplay: block;の違いについて簡単に解説します。

まずサンプルコードを用いて、挙動を確認してみましょう。

サンプルコードの挙動からinline-blockは横並び、blockは縦並びとなっていることが分かります。

ちなみにですがinlineも横並びとなります。

この並び以外にもdisplayプロパティのinline・inline-block・blockの違いは他にもあります。興味ある方は下記を参考にしましょう。

いかがでしたでしょうか？

span要素以外にも、もし幅や高さを固定したいができないといった時はまず、displayプロパティを確認してください。

ここで紹介したことを覚えておくと、幅や高さを固定するとき悩むことなくできるので、ぜひ抑えておいてください。