インライン属性の大きさ指定

span 属性の項目に大きさを付加してみました。

span.a{
    width: 100px;
    height: 100px;
}

span.b{
    width: 50px;
    height: 50px;
}

実際に

<span class="a"><span class="b"></span></span>

として配置してみましたが、どちらも 0px になり大きさが設定できていません。

原因は、 span はインライン属性の DOM であり、インライン属性は大きさを保持できないということが決められているようです。解決策としては、 display: block; を CSS に追加してブロック要素にすることです。