*1 インライン要素よりも前に配置できない。

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

下記の例では、div要素をインラインボックスとして横に並べて表示しています。

<div style="display:inline; color:#ffffff; background:#333333; padding:5px">CSSとは</div>
<div style="display:inline; color:#ffffff; background:#333333; padding:5px">CSSとは</div>
<div style="display:inline; color:#ffffff; background:#333333; padding:5px">CSSとは</div>

下記の例では、img要素をブロックボックスとして改行して表示しています。

<img src="../image/back.gif" alt="" style="display:block">
あいうえお・・・

あいうえお・・・

下記の例では、span要素に高さ、横幅を指定しています。

あいうえお
<span style="display:inline-block; width:100px; height:20px; background:#ccccff; border:1px solid gray;">かきくけこ</span>
さしすせそ

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

<div style="margin-left:2em">
  <div style="display:list-item">HTML</div>
  <div style="display:list-item">CSS</div>
</div>

後続の要素が回り込みや絶対配置されていないブロックボックスであれば、そのブロックボックス内の最初のインラインボックスであるかのように表示されます。

<h4 style="display:run-in; font-size:12pt; text-decoration:underline; margin-right:3px;">run-in</h4>
<p>後続の要素が回り込みや絶対配置されていないブロックボックスであれば・・・</p>

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

後続の要素が回り込みや絶対配置されていないブロックボックスであり、後続要素の左マージンの範囲に収まればその箇所に、収まらなければ通常のブロックボックスとして表示されます。Opera 11.6 で動作を確認しています。IE9, Firefox 12, Chrome 18, Safari 5.1 ではまだサポートされていません。

<h4 style="display:compact; font-size:12pt; text-decoration:underline;">compact</h4>
<p style="margin-left:100px">後続の要素が回り込みや絶対配置されていないブロックボックスであり・・・</p>

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

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

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

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

<style>
.inline-table { display:inline-table; border-collapse: collapse; }
.inline-table td { border: 1px solid gray; }
</style>

<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>

画面を縦に分割するなどのフレックスコンテナとして表示します。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>

• http://www.w3.org/TR/CSS1/#display
• http://www.w3.org/TR/CSS2/visuren.html#display-prop
• http://www.w3.org/TR/css3-box/#the-lsquo
• http://www.d-toybox.com/spec/CSS3/box/index.html#L706
• https://developer.mozilla.org/ja/docs/Web/CSS/display
• http://caniuse.com/#search=css%202.1%20properties