CSSのディスプレイプロパティ指定方式

ディスプレイ block

ディスプレイプロパティは、要素の表示方法を指定します。display: block; はブロックレベルの要素を生成し、行全体を占有します。

この要素にはディスプレイblockが設定されています。ブロック要素として表示され、常に新しい行から始まります。幅は可能な限り広がり、通常は親要素の幅いっぱいに広がります。

display: inline; はインライン要素を生成し、コンテンツの幅だけを占有します。ブロック要素のように新しい行から始まることはなく、他の要素と同じ行に並びます。

この要素にはディスプレイinlineが設定されています。この要素にはディスプレイinlineが設定されています。

display: inline-block; はインラインブロック要素を生成します。インライン要素のように同じ行に並びますが、ブロック要素のように幅や高さを指定することができます。

この要素にはディスプレイinline-blockが設定されています。

display: none; は要素を表示しません。要素はレンダリングツリーに存在せず、レイアウトにも影響を与えません。

この要素にはディスプレイnoneが設定されています。この要素にはディスプレイnoneが設定されています。この要素にはディスプレイnoneが設定されています。