CSSを書く人の為のHTML5 inline or block 早見表

ドーモ　こんにちは　皆さんはCSSは書いておられますか？　
毎日書いてるよって人も、たまに書くだけだよって人もおられるかとは思いますが、ごくまれに書いてるはずのCSSが上手くHTMLに当たらないって経験は必ずされると思います。そのような時は、CSSで"display:ほにゃらら"と当ててやるとたちまちご機嫌なCSSに立ち返ります。[MDN"display"](https://developer.mozilla.org/ja/docs/Web/CSS/display)正確な解説はMDNをご覧ください

この原因はHTMLの初期値のスタイル block or inlineという要素がCSSの邪魔をしているのです。
block要素には、block要素のCSSルール(具体例:inline要素とは異なり高さと幅を指定できる。)
inline要素にはinline要素のCSSルール(具体例:inline要素の marginは、 左右のみ指定可能。上下は指定不可。)がそれぞれ独自にあります。

わかりやすく言うとサッカー部と野球部が入り乱れてスポーツをしている状況です。最終的には、野球のルールとサッカーのルールの両方を学ばなければいけないのですが、まず最初にこの人は野球部なのかサッカー部なのかを判別できるようにならなければなりません。

HTML5の block or inline の判別の事です。




| tag            | block | inline |     
| -------------- | ----- | ------ | 
| `<html>`       | ○     |        |
| `<body>`       | ○     |        |
| `<address>`    | ○     |        |
| `<article>`    | ○     |        | 
| `<aside>`      | ○     |        |    |     |
| `<blockquote>` | ○     |        |     |     |
| `<details>`    | ○     |        |     |     |
| `<dialog>`     | ○     |        |     |     |
| `<dialog>`     | ○     |        |     |     |
| `<dd>`         | ○     |        |     |     |
| `<div>`        | ○     |        |     |     |
| `<dl>`         | ○     |        |     |     |
| `<dt>`         | ○     |        |     |     |
| `<fieldset>`   | ○     |        |     |     |
| `<figcaption>` | ○     |        |     |     |
| `<figure>`     | ○     |        |     |     |
| `<footer>`     | ○     |        |     |     |
| `<form>`       | ○     |        |     |     |
| `<h1>`         | ○     |        |     |     |
| `<h2>`         | ○     |        |     |     |
| `<h3>`         | ○     |        |     |     |
| `<h4>`         | ○     |        |     |     |
| `<h5>`         | ○     |        |     |     |
| `<h6>`         | ○     |        |     |     |
| `<header>`     | ○     |        |     |     |
| `<hgroup>`     | ○     |        |     |     |
| `<hr>`         | ○     |        |     |     |
| `<main>`       | ○     |        |     |     |
| `<nav>`        | ○     |        |     |     |
| `<ol>`         | ○     |        |     |     |
| `<p>`          | ○     |        |     |     |
| `<pre>`        | ○     |        |     |     |
| `<section>`    | ○     |        |     |     |
| `<ul>`         | ○     |        |     |     |
| `<a>`          |       | ○      |     |     |
| `<abbr>`       |       | ○      |     |     |
| `<acronym>`    |       | ○      |     |     |
| `<audio>`      |       | ○      |     |     |
| `<b>`          |       | ○      |     |     |
| `<bdi>`        |       | ○      |     |     |
| `<bdo>`        |       | ○      |     |     |
| `<big>`        |       | ○      |     |     |
| `<br>`         |       | ○      |     |     |
| `<button>`     |       | ○      |     |     |
| `<canvas>`     |       | ○      |     |     |
| `<cite>`       |       | ○      |     |     |
| `<code>`       |       | ○      |     |     |
| `<data>`       |       | ○      |     |     |
| `<datalist>`   |       | ○      |     |     |
| `<del>`        |       | ○      |     |     |
| `<dfn>`        |       | ○      |     |     |
| `<em>`         |       | ○      |     |     |
| `<embed>`      |       | ○      |     |     |
| `<i>`          |       | ○      |     |     |
| `<iframe>`     |       | ○      |     |     |
| `<img>`        |       | ○      |     |     |
| `<ins>`        |       | ○      |     |     |
| `<kbd>`        |       | ○      |     |     |
| `<label>`      |       | ○      |     |     |
| `<map>`        |       | ○      |     |     |
| `<mark>`       |       | ○      |     |     |
| `<meter>`      |       | ○      |     |     |
| `<noscript>`   |       | ○      |     |     |
| `<object>`     |       | ○      |     |     |
| `<output>`     |       | ○      |     |     |
| `<picture>`    |       | ○      |     |     |
| `<progress>`   |       | ○      |     |     |
| `<q>`          |       | ○      |     |     |
| ` 
 `        |       | ○      |     |     |
| `<samp>`       |       | ○      |     |     |
| `<select>`     |       | ○      |     |     |
| `<slot>`       |       | ○      |     |     |
| `<small>`      |       | ○      |     |     |
| `<strong> `    |       | ○      |     |     |
| `<sub>`        |       | ○      |     |     |
| `<sup>`        |       | ○      |     |     |
| `<svg>`        |       | ○      |     |     |
| `<template>`   |       | ○      |     |     |
| `<textarea>`   |       | ○      |     |     |
| `<time>`       |       | ○      |     |     |
| `<u>`          |       | ○      |     |     |
| `<tt>`         |       | ○      |     |     |
| `<var>`        |       | ○      |     |     |
| `<video>`      |       | ○      |     |     |


                                               

こちらを丸暗記しておけば、快適なコーディング生活が保障されます。



コメントのご指摘による追記

# 例外


| tag          | display           |
| ------------ | ------------------ |
| `<li>`       | list-item          |
| ` <input> `  | inline-block       |
| `<script> `  | none               |
| `<table>`    | block table        |
| `<tbody>`    | table-row-group    |
| `<thead>`    | table-header-group |
| `<tfoot>`    | table-footer-group |
| `<tr>`       | table-row          |
| `<td>`       | table-cell         |
| `<th>`       | table-cell         |
| `<colgroup>` | table-column-group |
| `<col>`      | table-column       |
| `<caption>`  | table-caption      |
| `<ruby>`     | ruby               |
| `<rp>`       | none             |
| `<rt>`       | ruby-text          |