インライン要素spanの最小高さを定義する

htmlのページを作るときによく使われるspanタグですが、私の友人の中にはこのタグをうまく使えていない人がいて、うまく使えていると思っているようですが、特に幅と高さを定義しなければならないときには面倒なことになるようです。
以前、友人に聞かれたことがある。 cssでspanのheightとwidthを定義した後、その幅と高さが無効であるかのように変化しないのはなぜでしょうか？

簡単な質問です。まず、spanのプロパティを理解する必要があります。spanはインライン要素で、インライン要素は幅と高さを無視します。これを理解すれば、解決策はcssを使ってspanをボックス型要素にすることです。

インライン要素をボックス化した要素として定義するには、2つの方法があります。

1. display属性displayを使って直接ボックス化された要素として定義する。
display:blockとする。

2. float属性floatを使用して、自動的にボックス型要素として定義する。
float:leftとなります。