インラインボックスとブロックボックス

要素  
├── インラインボックス  
└── ブロックボックス  
    ├── コンテンツに意味づけ  
    └── 情報を整理・グループ化

コンテンツがぎりぎり収まる大きさのボックス
主にテキストを装飾するもの(b、strong)や、すべてのフォーム部品など

インラインボックスは上下のmargin、width、heightを設定することはできない

親要素と同じ幅のボックス
ブロックボックスの中でも2つにわけられる。

上下のmarginとwidth、heightを設定可能なインラインボックスみたいな感じ
横並びにして、widthやheightを指定したいときとかに使う？

ボックスモデル

ボックスとは、コンテンツを表示するために使う領域のこと
内側から以下のようになっている

用語	説明
padding	コンテンツのすぐ外側にある領域。ボックスに背景色を設定した場合、この領域も塗りつぶされる
border	ボックスの周囲の枠線
margin	このボックスの周囲のボックスとの距離

ボックスは「コンテンツ+パディングの領域」ってこと！

インラインの場合、うまくpaddingが適用されないことがある？
そんなときは、インラインブロックを使う！！

インラインレベル要素にも上下左右のpaddingを指定できるが、そのpaddingの大きさは親要素の高さを決定付ける数値として加算されず、親要素の大きさ以上のpaddingを設定した場合は親要素を突き破って表示される。

display: inline-block;とするだけ！！！
そうすると、うまいことpaddingが効いてくれる

ボタンの上下のpaddingがうまく効いていない

指定通りにpaddingが効いている！！