ボタン要素を display:block に設定すると、インライン ブロックのようにコンテンツに基づいてサイズを計算しながら、ブロックのように垂直方向のスペースを占有します。これは非常に便利な動作のようです。他の要素をこのように動作させることは可能ですか?
フロートとクリアを使用して同様の表示方法を実現できますが、それに合わせて調整されていない近くのコンテンツに大混乱を引き起こします。
各要素をラップし、外側の要素を display:block に、内側の要素を display:inline-block にすることで、より適切に実現できます。ただし、これには追加のマークアップが必要です。
あなたが望むように聞こえますdisplay: table。
このような「テーブル」は、コンテンツにぴったり合うように縮小され、コンテンツがdisplay: table-rowまたはでないdisplay: table-cell場合は、単一セルのテーブル内にあるかのように扱われます。autoマージンを使用して水平方向に中央揃えにすることもできます。
私はあなたの例に変更blockしtableましたが、それはまさにあなたが望むと思います。
(「レイアウトにテーブルを使用しないでください」というアドバイスについて考えている場合は、CSS 機能ではなく、HTML マークアップで記述されたテーブルを使用することを指しています。)