要素をどのような形式で表示するかを指定します。

要素を非表示にします。JavaScript で要素の表示・非表示を切り替えたりします。

.memo { display: none; }

<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="memo" class="memo">メモ.メモ.メモ...</div>

(function() {
  window.addEventListener("load", function() {
    document.getElementById("show").addEventListener("click", function() {
      document.getElementById("memo").style.display = "block";
    });
    document.getElementById("hide").addEventListener("click", function() {
      document.getElementById("memo").style.display = "none";
    });
  });
})();

文章中に出現するような前後に改行が行われないのがインラインボックスです。下記の例では、本来はブロックボックスである div 要素をインラインボックスとして表示しています。

.inline { display: inline; }

<div class="inline">This is a pen.</div>
<div class="inline">That is an apple.</div>

前後で改行が行われるのがブロックボックスです。下記の例では、本来はインラインボックスである img 要素をブロックボックスとして表示しています。

.block { display: block; }

<img class="block" src="../image/back.gif" alt="Sample image">
あいうえお・・・

あいうえお・・・

inline の代わりに inline-block を指定すると width で横幅を指定できるようになります。

.inline-block {
  display: inline-block;
  width: 5rem;
  background-color: #999;
  text-align: center;
  color: #fff;
}

<div class="inline-block">Red</div>
<div class="inline-block">Green</div>
<div class="inline-block">Blue</div>

後続の要素が回り込みや絶対配置されていないブロックボックスであれば、そのブロックボックス内の最初のインラインボックスであるかのように表示されます。Chrome 4～31 や Safari 3.1～6 等でサポートされていましたが、現在ではサポートを中止しているブラウザが大半のようです。

.run-in {
  display: run-in;
  color: #fff;
  background-color: #666;
  padding: 0 .5rem;
}

<div style="width:13rem">
 <div class="run-in">run-in</div>
 <div>後続の要素が回り込みや絶対配置されていないブロックボックスであれば...</div>
</div>

※ 未対応ブラウザが多いため run-in を用いずに擬似的に表示しています。

リストアイテム(li要素)のように表示します。

.list > * {
  display: list-item;
  margin-left: 1.3rem;
}

<div class="list">
  <div>HTML</div>
  <div>CSS</div>
</div>

下記の例では二つのアーティクルを左右に並べ、タイトルの高さ、本文の高さをそろえています。こうしたレイアウトは h2 や p や div がグリッドの直接の子要素であればうまく制御することができますが、article の子要素(グリッドの孫要素)となるとうまく制御できません。article 要素に display: contents を指定すると、article 要素は DOM ツリーから削除されたように振る舞い、h2, p, div 要素がグリッドの子要素として振舞うようになります。

.grid-contents {
  width: 32rem;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
}
.grid-contents article {
  display: contents;
}

<div class="grid-contents">
  <article>
    <h2>2001年宇宙の旅</h2>
    <p>人類に知恵を与えた石板(モノリス)。月で発見された...</p>
    <div class="author">著：アーサー・C・クラーク</div>
  </article>
  <article>
    <h2>アンドロイドは電気羊の夢を見るか</h2>
    <p>デッカードが脱走したアンドロイドを追います。「ブレードランナー」のタイトルで映画化されました。</p>
    <div class="author">著：フィリップ・K・ディック</div>
  </article>
</div>

div要素などを、テーブルを構成する要素として扱うことが可能です。

.table { display: table; border-collapse:collapse; }
.caption { display: table-caption; text-align: center; font-weight: bold; }
.tr { display: table-row; }
.th, .td { display: table-cell; border: 1px solid gray; width: 100px; text-align: center; }
.th { font-weight: bold; }

<div class="table">
  <div class="caption">Table.A</div>
  <div class="tr">
    <div class="th">AAA</div>
    <div class="th">BBB</div>
    <div class="th">CCC</div>
  </div>
  <div class="tr">
    <div class="td">AAA</div>
    <div class="td">BBB</div>
    <div class="td">CCC</div>
  </div>
</div>

インラインボックスの様に、横方向に並ぶテーブルを表示することができます。

.inline-table { display:inline-table; border-collapse: collapse; }
.inline-table td { border: 1px solid gray; padding: 0 .5rem; }

<table class="inline-table">
  <caption>Table.A</caption>
  <tr><td>AAA</td><td>BBB</td></tr>
  <tr><td>CCC</td><td>DDD</td></tr>
</table>
<table class="inline-table">
  <caption>Table.B</caption>
  <tr><td>EEE</td><td>FFF</td></tr>
  <tr><td>GGG</td><td>HHH</td></tr>
</table>

ルビを振ります。詳細は ruby を参照してください。Firefox と IE しか対応していないようです。

.ruby { display: ruby; }
.rb { display: ruby-body; }
.rt { display: ruby-text; font-size: 80%; }

<div class="ruby">
  <span class="rb">紫陽花</span>
  <span class="rt">あじさい</span>
</div>

※ 未対応ブラウザが多いため <ruby> を用いて表示しています。

float を用いたテキストの回り込みを行う場合、回り込みを解除するために clearfix という技を利用する必要がありましたが、親要素に flow-root を指定することにより簡単に回り込みの解除ができるようになりました。

.flow-root { display: flow-root; }
.float { float: left; margin-right: .5rem; }

<div class="flow-root">
  <img class="float" src="image/sample.png" alt="Sample image">
  昔、昔、あるところに大きな雪だるまが...
</div>
clearfixがとても簡単になりました。

昔、昔、あるところに大きな雪だるまが...

clearfixがとても簡単になりました。

画面を縦に分割するなどのフレックスコンテナとして表示します。flex-flow や flex を参照してください。

.flexbox {
  display: flex;
}
.flexbox > div {
  flex: 1;
  text-align: center;
  height: 30px;
  border: 1px solid #999;
  background-color: #cfc;
}

<div class="flexbox">
 <div>A</div>
 <div>B</div>
 <div>C</div>
</div>

グリッドを表示します。詳細は grid を参照してください。

.grid-container {
  display: grid;
  grid: 3rem 3rem / 4rem 4rem 4rem 4rem;
}
.grid-container > * {
  border: 1px solid #ccc;
  text-align: center;
}
.itemA { grid-row: 1 / 2; grid-column: 1 / 2; }
.itemB { grid-row: 2 / 3; grid-column: 1 / 2; }
.itemC { grid-row: 1 / 3; grid-column: 2 / 3; }
.itemD { grid-row: 1 / 2; grid-column: 3 / 5; }
.itemE { grid-row: 2 / 3; grid-column: 3 / 4; }
.itemF { grid-row: 2 / 3; grid-column: 4 / 5; }

<div class="grid-container">
  <div class="itemA">A</div>
  <div class="itemB">B</div>
  <div class="itemC">C</div>
  <div class="itemD">D</div>
  <div class="itemE">E</div>
  <div class="itemF">F</div>
</div>

• https://developer.mozilla.org/ja/docs/Web/CSS/display
• https://w3c.github.io/csswg-drafts/css-display/#the-display-properties