Span 要素が CSS の幅と高さを受け入れないのはなぜですか?

高さと幅がスパンに適用されない: 解決策

CSS でスパンを扱うときは、それらがインライン要素であることを覚えておくことが重要ですデフォルトでは。これは、幅と高さの寸法を自然に受け入れないことを意味します。

質問で説明されている問題には、ボタンに似たスパンのスタイル設定が含まれます。開発者は、! important フラグを使用して幅と高さを設定しようとしましたが、機能しませんでした。これは、スパンのようなインライン要素には固有の次元がないためです。

これを解決するには、スパンをブロックレベルの要素に変換することが解決策です。これは、display: inline-block; を追加することで実現できます。 (または display: block;) プロパティを CSS のスパンに追加します。

例は次のとおりです:

span.product__specfield_8_arrow {
    display: inline-block;
    width: 50px;
    height: 33px;
    ... (remaining styles)
}

表示プロパティを inline-block に変更すると、スパンは次のように動作します。ブロックレベルの要素。これにより、意図したとおりに幅と高さの寸法を受け入れて表示できるようになり、目的のボタンのような外観が得られます。

以上がSpan 要素が CSS の幅と高さを受け入れないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。