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