並び・配置

`display: block` 幅いっぱいに積み上げる

重要度5 / 5

意味

要素を、親の幅いっぱいに広がる塊にして、上から下へ積む場合に使います。<div> や <p>、<section> の初期値です。

外側の描画です。width を指定しなければ、親の使える幅まで広がります。そのあと隣の兄弟は、右ではなく下に来ます。width / height / margin / padding / border は、四辺とも効きます。

内側の描画です。子を特別な格子にはしません。子はそれぞれの display に従います。箱の中の文字を左右に寄せたい場合は、この要素に text-align を付けます。箱そのものを、幅を決めたうえで左右中央へ置く場合は、margin-left と margin-right を auto にします。text-align: center だけでは、幅いっぱいのブロック自体は中央に寄りません。

デザインを再現するときの影響です。ヘッダー帯、本文カラム、フッター、カードの外枠など、「一段を占有する面」に使います。横並びのボタンやサムネイルを block のまま置くと、1つずつ改行されたように見えます。横に並べたい場合は inline-block か flex を検討します。

隣り合うブロックの上下マージンは、重なって1つ分に見えることがあります。空けた数値より狭く見えるときは、この重なりを疑います。

コード

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<span class="box">ひとつめ</span>
<span class="box">ふたつめ。下に積まれます。</span>

CSS

.box {
  display: block;
  background: #efeef8;
  padding: 0.5rem 0.75rem;
  margin: 0.4rem 0;
}

プレビュー

ブラウザ対応

主要ブラウザの対応状況
ブラウザ	対応
Chrome	1〜
Firefox	1〜
Safari	1〜
Edge	12〜
Chrome Android	18〜
Safari iOS	1〜

出典: MDN Web Docs（`@mdn/browser-compat-data`）