こんにちは、tanaka です。
今回は、display（inline、inline-block、block）
この３種類の大まかな説明をします。
文字化けします
＜コピー、ペーストすると文字化けします＞
このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。
十分ご注意ください。
広告
display
＜inline＞
| inline | |
| 並び | よこ |
| width、height | × |
| 幅の初期値 | 文字の幅 |
| padding、margin | 上下× 左右○ |
| margin 0 auto | 使用不可 |
| HTML初期値 | a span strong img |
＜inlineの特徴＞
１：主に文字を入れる器として使われる
２：基本的に左右は自動調整される
３：widthの設定はできない
４：中央寄せは「text-align: center;」
５：行間へバックスクリーンが入らない（文字の幅だけバックスクリーン）
＜inline-block＞
| inline-block | |
| 並び | よこ |
| width、height | ○ |
| 幅の初期値 | 指定しなければ 文字の幅 |
| padding、margin | ○ |
| margin 0 auto | 使用不可 |
| HTML初期値 | input textarea |
＜inline-blockの特徴＞
１：横並びにすると隙間ができる（親要素にfont-size: 0; で解決）
２：全体の高さと文字の大きさを同じにすると下に隙間ができる（親要素にfont-size: 0; で解決）
３：中央寄せは「text-align: center;」
＜block＞
| block | |
| 並び | たて |
| width、height | ○ |
| 幅の初期値 | 指定しなければ 親要素の幅 |
| padding、margin | ○ |
| margin 0 auto | ○ |
| HTML初期値 | h1~h6 p div ul ol li table |
＜blockの特徴＞
１：ほとんどの初期値がこれ
２：タテ並びになる。
３：widthの初期値が親要素のwidth
４：中央寄せは margin 0 auto（widthの設定忘れずに）
５：デフォルト値の初期化が必要。
padding: 0;
margin: 0;
line-height: 1;
以上
cssのdisplay（inline、inline-block、block）３種の説明
の話でした。
ありがとうございました。