並び・配置

`display: none` 箱を作らず、並びから外す

重要度4 / 5

意味

要素の箱を作らず、並びの計算からも外す場合に使います。メニューを閉じた状態、印刷したくない塊、今は出さないパネルなどです。

描画です。幅も高さも余白も確保しません。後ろの兄弟は、空いた場所へ寄ります。画面から消しても場所を残したい場合は visibility: hidden、見た目だけ透明にして触れなくしない場合は opacity など、別の指定です。

影響領域です。指定した要素とその子孫が、この文書の描画から外れます。子だけを残す、ということはできません。親を none にすると、中の flex や grid も描かれません。

display: none と、画面外へずらす・高さ0にする、は同じではありません。後者は箱の計算が残ることがあります。カンプの「開閉で下が詰まる」なら none（または DOM から外す）、「開閉しても下の位置は動かない」なら場所を残す指定を検討します。

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

HTML

<div class="row">
  <span>残る</span>
  <span class="gone">消える（場所も空かない）</span>
  <span>寄ってくる</span>
</div>

CSS

.row span {
  display: inline-block;
  padding: 0.4rem 0.65rem;
  background: #efeef8;
  margin-right: 0.35rem;
}
.gone {
  display: none;
}

プレビュー

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