はじめに
イマイチCSSの以下の部分が理解できていないのでまとめてみようと思います。
-
ボックスモデル
- margin
- padding
-
display-style
- blockレベル要素
- inline要素
- inline-block要素
ボックスモデルについて
ボックスモデルとは？
ボックスモデルの各領域について
content
- テキストや画像などが表示される領域
- 幅はwidthプロパティ、高さはheightプロパティを指定する事で任意の幅と高さにする事ができる
- backgroundプロパティの指定が有る場合、内容領域とパディングに背景が表示される
padding
- 内容領域とボーダーの間にある余白領域
- パディングの指定は、paddingプロパティで行う
- backgroundプロパティの指定が有る場合、パディング部分にも背景が表示され、パディング領域の左上が背景画像の始点になる
border
- パディングの外側にある領域
- ボーダーは余白とは違い、その名の通り「線」のため、パディングやマージンのように余白の指定をするのではなく、各borderプロパティによって線の種類（border-style）を変えたり太さ（border-width）や色（border-color）を変えたりといった事ができる
margin
- ボックスの最も外側にある余白領域
- marginプロパティの指定をする事で余白を調整する事ができる
- マージン領域には背景が表示されないため常に透明になる
- 要素同士が垂直方向で隣接している場合、条件によってはマージンが重なり、いずれかの大きいマージンの値が反映されることをマージンの相殺と言う
- 水平マージンは相殺されず、各マージンの値が足されたマージンが反映される
display-styleについて
blockレベル要素
blockレベル要素とは？
- 文書の骨組みとなる要素
- 見出し要素（h1, h2, h3…h6）、p、ul、ol、li、div、table など
- 要素の前後に改行が入り、ブロックを積んでいくような表示になる
特徴
- 縦に積まれていく
- 幅 width と高さ height が指定できる
- 上下左右に margin を指定できる
- 上下左右に padding を指定できる
- text-align は要素の中身に適応される
- vertical-align は指定できない
inline要素
inline要素とは？
- ブロックレベル要素の中身として使われる要素
- a、span、strong など
- 要素の前後には改行は入らず、テキスト状に横に横に流れていくような表示になる
特徴
- 横に並んでいく
- 幅 width と高さ height は指定できない
- 幅や高さは文字列の長さや文字の大きさなど、内容物のサイズのみ指定可能
- 左右だけ margin を指定できる
- 左右に padding を指定できる
- text-align を親ブロックに付けることで指定できる
- vertical-align を指定できる
inline-block要素
inline-block要素とは？
- インライン要素のように横に並んでブロック要素のように幅や高さ、margin や padding を指定できる
特徴
- 横に並んでいく
- 幅 width と高さ height が指定できる
- 上下左右に margin を指定できる
- 上下左右に padding を指定できる
- text-align を親ブロックに付けることで指定できる
- vertical-align が指定できる