「display: block」と「width: auto」がコンテナを埋めるようにボタンを引き伸ばさないのはなぜですか?

「display: block」と「」を使用する場合ボタン上で「width: auto」を指定すると、コンテナが引き伸ばされて満たされることが期待される場合があります。ただし、常にそうとは限りません。特に、最新のブラウザのボタンは、この点で他のブロック要素とは異なる動作をします。

この動作の背後にある理由は、置換要素としてのボタンの性質にあります。置換される要素とは、その外観と寸法が主に CSS によって決定されるのではなく、オペレーティング システムやその他の外部リソースなどの外部要因によって決定される要素です。ボタンの場合、そのサイズとスタイルは多くの場合、プラットフォーム固有のユーザー インターフェイス規則によって定義されます。

固有の寸法

置換された要素には固有の寸法があります。幅と高さは周囲のコンテンツではなく要素自体によって定義されます。置換された要素に「width: auto」が適用される場合、要素の固有の幅が使用されます。ボタンの場合、この固有の幅は通常、オペレーティング システムによって定義されたデフォルトのボタン コントロールのサイズに対応します。

視覚的な書式設定の要件

固有の寸法に加えて、次の値が置き換えられます。要素には、視覚的な書式設定の要件を課すこともできます。ボタンの場合、これらの要件には、キャプション、ボタンの境界線、およびその他のユーザー インターフェイス要素の表示が含まれます。これらの書式設定要件は、「width: auto」や「display: block」などの CSS プロパティの効果をオーバーライドします。

結論

「」に関するボタンの動作「display: block」と「width: auto」は、置換された要素としてのステータスの結果です。それらの固有の寸法と視覚的な書式設定の要件は CSS プロパティよりも優先され、その結果、ボタンがコンテナーを満たすために必ずしも引き伸ばされるわけではないという動作が観察されます。