ホームページ > 記事 > ウェブフロントエンド > ボタンが `display: block` と `width: auto` でコンテナを埋めるように拡張されないのはなぜですか?
「display: block」と「width: auto」がコンテナを埋めるようにボタンを展開しないのはなぜですか?
HTML では、ボタン、入力、選択、画像などの特定の要素は、「置換要素」として指定されます。これらの要素には、オペレーティング システムやプラグインなどの外部リソースによって決定される固有の寸法と外観があります。
「display: block」をボタンに適用すると、ボタンがブロック レベルの要素のように動作する必要があることを示します。コンテナの全幅を占めます。ただし、「width: auto」はボタンの固有の幅を使用することを指定します。
置換された要素には固有の寸法があり、幅と高さは固定されており、CSS によって変更できません。たとえば、画像要素の固有の寸法は、画像ファイルのサイズによって決まります。置換された要素に「width: auto」が適用されると、ブラウザはその固有の幅を尊重します。
さらに、置換された要素には、CSS スタイルをオーバーライドするブラウザまたはオペレーティング システムによって課される視覚的な書式設定要件がある場合があります。たとえば、ボタンには、CSS だけでは変更できないユーザー インターフェイス コントロールが組み込まれています。
ボタンの場合、W3C によって置き換えられる要素として正式に定義されていませんが、同様の動作を示します。したがって、「display: block; width: auto;」を適用すると、ボタンの固有の幅はボタンの視覚的な書式設定要件によって制限されるため、ボタンをコンテナいっぱいに拡大することはできません。
以上がボタンが `display: block` と `width: auto` でコンテナを埋めるように拡張されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。