legend-display-rendering-ref.html

Enable keyboard shortcuts

<!doctype html>

<title>Reference for rendered legend and CSS display rendering</title>

<style>

body { margin: 0; }

div { width: 600px; box-sizing: border-box; background: #ddd; border: 1px solid; }

.padding { padding-left: 5em; }

.margin { margin-left: 5em; }

.cell { display: inline-block; width: 50%; }

.ruby { display: block; }

</style>

<div><span class=cell>table</span><span class=cell>table</span></div>

<div class=padding>table-row-group</div>

<div class=padding>table-header-group</div>

<div class=padding>table-footer-group</div>

<div class=padding>table-row</div>

<div class=margin>table-cell</div>

<div class=padding>table-column-group</div>

<div class=padding>table-column</div>

<div>table-caption</div>

<div>flow</div>

<div>flow-root</div>

<div>run-in</div>

<div>inline</div>

<div>inline-block</div>

<div><span class=cell>inline-table</span><span class=cell>inline-table</span></div>

<div><span class=ruby>ruby</span><span class=ruby>ruby</span></div>

<div>ruby-base</div>

<div>ruby-text</div>

<div>ruby-base-container</div>

<div>ruby-text-container</div>

<div><span class=cell>grid</span><span class=cell>grid</span></div>

<div><span class=cell>inline-grid</span><span class=cell>inline-grid</span></div>

<div><span class=cell>flex</span><span class=cell>flex</span></div>

<div><span class=cell>inline-flex</span><span class=cell>inline-flex</span></div>