display: inline-block;って？

2024年6月8日

display: inline-block; は、要素を行内ブロック要素として表示するCSSのプロパティです。行内ブロック要素は、インライン要素とブロック要素の中間の特性を持っています。

• 行内要素 (display: inline;): 要素は横に並び、コンテンツの幅だけを占めます。高さや余白の設定が効きません。

• ブロック要素 (display: block;): 要素は横幅いっぱいを占め、新しい行に配置されます。高さや余白の設定が効きます。

• 行内ブロック要素 (display: inline-block;): 要素は横に並びつつ、高さや余白の設定が効きます。ブロック要素のようにブロック単位で横幅を持ちますが、行内要素のように横に並びます。

上記の例では、.center-button クラスが親要素に適用されており、その中にある button 要素に display: inline-block; スタイルが適用されています。これにより、ボタンは中央揃えになり、かつ横幅はコンテンツに合わせる形で表示されます。