display: inline;は、毎回「どの指定が効かなかったっけ？」と迷うので、整理して理由を調べてみた。
どの指定が効かないのか整理
効かないもの
- padding-top
- padding-bottom
- margin-top
- margin-bottom
- width
- height
効くもの
- padding-left
- padding-right
- margin-left
- margin-right
なぜ高さ(height)や上下方向(top、bottom)はダメなのか
インライン要素は「文字」と同じ扱いになる。
「文字」の行の高さは、フォントサイズや line-height で決まるように設定されている。
なぜなら、もし上下方向に大きさを持たせる指定ができるようになってしまうと、他のテキストとの整列が崩れてしまうことになるから。
そのため、「文字」は高さや上下方向の指定は無視する仕様になっている。（※厳密に言うと、padding-top、padding-bottomは描画されるけど、行の高さには影響されない）
※「おじいさんは山へ芝刈りに、おばあさんは川へ洗濯にいきました。」の文章にpadding-top: 25px;を指定するとこんな感じになる。↓
なぜ横幅(width)がダメなのか
では、なぜ横幅もダメなのか。
これも理由は同じで、横幅を持たせてしまうと、文字の流れにおかしな空間が生まれてしまうから。
たとえば、「Hello」の文字に width: 200px;を指定したとすると、「Hello」だけ幅 200px を占有して次の文字が強制的に折り返されたり、おかしな隙間が生まれてしまう。
つまり、「文字の一部」としての性質が崩れてしまう。
なぜ左右方向(left、right)は良いのか
なぜ左右方向だけ許されているのか。
これは文字間の「カーニング（間隔調整）」として使えるから。
左右のpaddingやmarginであれば、文字の前後に余白を挿入するだけなので、文字の流れを壊すことはない。
なので、左右方向の指定は許容されている。