CSS `display: block;` チートシート
display: block; は、CSSの最も基本的な表示モードの一つです。このチートシートでは、ブロックレベル要素の主な特性と、それらがレイアウトにどのように影響するかをまとめます。
| 特性 | 説明 | 例/備考 |
|---|---|---|
| 幅と高さ |
デフォルトで親要素の利用可能な幅をすべて占有します。
width と height プロパティを使用して、明示的に幅と高さを設定できます。
|
div { display: block; width: 200px; height: 100px; } |
| 改行 | 常に新しい行から開始し、その後に続く要素も新しい行から開始させます。 | <div>ブロック要素1</div> <span>インライン要素</span> <div>ブロック要素2</div> /* 結果: ブロック要素1、インライン要素、ブロック要素2がそれぞれ別の行に表示される */ |
| マージンとパディング | 上下左右のマージンとパディングが適用可能です。 特に、上下のマージンは隣接するブロック要素間で相殺（マージンコラプス）されることがあります。 |
p { display: block; margin: 10px 20px; padding: 15px; } |
| 子要素 | 他のブロックレベル要素やインラインレベル要素を含むことができます。 |
<div> <p>これは段落です。</p> <span>これはスパンです。</span> </div> |
| デフォルトの要素 |
以下のHTML要素は、デフォルトで display: block; の特性を持ちます。
|
<div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <article>, <section>, <header>, <footer>, <nav>, <form>, <table> など |
| 中央揃え |
ブロック要素を水平方向に中央揃えするには、margin-left と margin-right を auto に設定します。
|
.center-block { width: 80%; margin: 0 auto; } |