display 「ボックスの種類」

<style type="text/css">
.css-runin {display : runin;}
.css-runin::after{content : "：";}
.css-compact {display : compact;}
.css-compact::after{content : "：";}
</style>
<!-- html -->
<dt class="css-runin">①【<dt>の見出し】</dt>
<dd><dt>にdisplay:run-in;を指定し、</dd>
<dd>後続の要素<dd>が回り込みも絶対配置でもないため、</dd>
<dd><dt>は、インライン要素として表示。</dd>
</dl>
<dl>
<dt class="css-runin">②【<dt>の見出し】</dt>
<dd style="float:left;"><dt>にdisplay:run-in;を指定し、</dd>
<dd style="float:left;">後続の要素<dd>に回り込み指定のため、</dd>
<dd style="float:left;"><dt>は、ブロック要素として表示。</dd>
</dl>
<b>◆display:compact;</b>
<dl>
<dt class="css-compact">①【<dt>の見出し】</dt>
<dd style="margin-left:150px"><dt>にdisplay:compact;を指定し、</dd>
<dd style="margin-left:150px">後続の要素<dd>が回り込みも絶対配置もなく、</dd>
<dd style="margin-left:150px">左マージンに収まるので、<dt>は、左マージンに表示。</dd>
</dl>
<dl>
<dt class="css-compact">②【<dt>の見出し】</dt>
<dd style="margin-left:100px"><dt>にdisplay:compact;を指定し、</dd>
<dd style="margin-left:100px">後続の要素<dd>が回り込みも絶対配置もないが、</dd>
<dd style="margin-left:100px">左マージンに収まらないので、<dt>は、ブロック要素として表示。</dd>
</dl>

<style type="text/css">
.css-table {
  display : table;
  height : 150px;
  width: 90%;
  text-align:center;
}
.css-caption {
  display : table-caption;
  height : 30px;
  padding-top:10px;
}
.css-colgroup {display : table-column-group;}
.css-col {display : table-column;}
.css-thead {
  display : table-header-group;
  background : skyblue;
}
.css-tbody {display : table-row-group;}
.css-tr {display : table-row;}
.css-td {
  display : table-cell;
  border:1px solid blue; 
  vertical-align:middle;
}
.css-tfoot {
  display : table-footer-group;
  background : skyblue;
}
</style>
<!-- html -->
<b>◆display:table; 関連</b><br>
<div class="css-table">
	<div class="css-caption">表題</div>
	<div class="css-colgroup" style="width: 100px">
	<div class="css-col"</div>
	<div class="css-col"</div>
	<div class="css-col"</div>
	</div>
	<div class="css-thead">
	<div class="css-tr">
	  <div class="css-td">ヘッダー１</div>
	  <div class="css-td">ヘッダー２</div>
	  <div class="css-td">ヘッダー３</div>
	</div>
	</div>
	<div class="css-tbody">
	<div class="css-tr">
	  <div class="css-td">セルＡ１</div>
	  <div class="css-td">セルＡ２</div>
	  <div class="css-td">セルＡ３</div>
	<</div>
	<div class="css-tr">
	  <div class="css-td">セルＢ１</div>
	  <div class="css-td">セルＢ２</div>
	  <div class="css-td">セルＢ３</div>
	<</div>
	</div>
	<div class="css-tfoot">
	<div class="css-tr">
	  <div class="css-td">フッター１</div>
	  <div class="css-td">フッター２</div>
	  <div class="css-td">フッター３</div>
	</div>
	</div>
</div>

<style type="text/css">
.css-inlinet {
  display : inline-table;
  border-collapse: collapse;
  text-align:center;
}
.css-inlinet td {border:1px solid blue;}
.css-inlinet thead,tfoot {background : skyblue;}
</style>
<!-- html -->
<b>◆display:inline-table;</b><br>
<table class="css-inlinet">
	<caption style="height : 30px;padding-top:10px;">表題　Ⅰ</caption>
	<thead>
	<tr><td>ヘッダー１</td><td>ヘッダー２</td></tr>
	</thead>
	<tbody>
	<tr><td>セルＡ１</td><td>セルＡ２</td></tr>
	<tr><td>セルＢ１</td><td>セルＢ２</td></tr>
	</tbody>
	<tfoot>
	<tr><td>フッター１</td><td>フッター２</td></tr>
	</tfoot>
</table>
<table class="css-inlinet">
	<caption style="height : 30px;padding-top:10px;">表題　Ⅱ</caption>
	<thead>
	<tr><td>header1</td><td>header2</td></tr>
	</thead>
	<tbody>
	<tr><td>cellA1</td><td>cellA2</td></tr>
	<tr><td>cellB1</td><td>cellB2</td></tr>
	</tbody>
	<tfoot>
	<tr><td>footer1</td><td>footer2</td></tr>
	</tfoot>
</table>

<style type="text/css">
.css-ruby {display : ruby;}
.css-rb {display : ruby-base;}
.css-rt {
  display : ruby-text;
  color:red;
}
.css-rbc {display : ruby-base-container;}
.css-rtc {display : ruby-text-container;}
</style>
<!-- html -->
<b>◆display:ruby; 関連</b>
<span class="css-ruby">
  <span class="css-rbc">
    <span class="css-rb">東</span><span class="css-rb">京</span>
  </span>
  <span class="css-rtc">
    <span class="css-rt">トウ</span><span class="css-rt">キョウ</span>
  </span>
  <span class="css-rtc" lang="en">
    <span class="css-rt">tokyo</span>
  </span>
</span>
のルビをカナと
<span class="css-ruby">
  <span class="css-rb">英語</span><span class="css-rt">えいご</span>
</span>で
<span class="css-ruby">振<span class="css-rt">ふ</span>るサンプルです。</span>