1. ブロックレベル要素とインラインレベル要素
ブロックレベル要素
ブロックレベル要素は、常に新しい行から始まり、横幅は親要素いっぱいに広がります。
1つ目のブロック要素
2つ目のブロック要素
3つ目のブロック要素
インラインレベル要素
インラインレベル要素は、改行されず横に並び、コンテンツの幅だけを占めます。
インライン要素1
インライン要素2
インライン要素3
2. マージンとパディング
マージン（外側の余白）
パディング（内側の余白）
マージンとパディングの組み合わせ
マージン: 20px
パディング: 15px
ボーダー: 2px solid
3. マージンの設定方法
4辺すべて同じ値
margin: 20px;
上下 | 左右
margin: 10px 30px;
上 | 右 | 下 | 左（時計回り）
margin: 10px 20px 30px 40px;
個別指定
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
左右中央寄せ（margin: auto）
width: 80%; margin: auto;
4. マージンの相殺
隣接する垂直方向のマージンは、大きい方の値が採用されます（相殺）。
margin-bottom: 30px
margin-top: 20px
→ 間隔は 50px ではなく 30px（大きい方）になります
水平方向のマージンは相殺されない
margin-right: 20px
margin-left: 30px
→ 間隔は 50px（20px + 30px）になります
5. パディングの設定方法
4辺すべて同じ値
padding: 20px;
上下 | 左右
padding: 10px 30px;
上 | 右 | 下 | 左（時計回り）
padding: 10px 20px 30px 40px;
パディングは相殺されない
padding-bottom: 30px
padding-top: 20px
→ 間隔は 50px（30px + 20px）になります
6. display プロパティ
display: block（インライン要素をブロック要素に）
display: block の span要素1
display: block の span要素2
display: inline（ブロック要素をインライン要素に）
display: inline の div要素1
display: inline の div要素2
display: inline-block
inline-block要素1
inline-block要素2
inline-block要素3
display: none（非表示）
表示される要素
display: none の要素（非表示）
表示される要素
7. スタイルの優先順位（複数のスタイルが適用されるケース）
ケース1: 詳細度による優先
詳細度が高いスタイルが優先されます。
クラス指定のみ（詳細度: 0,1,0）
クラス指定 + ID指定（詳細度: 1,1,0）→ こちらが優先
ケース2: 後から書かれたスタイルが優先
同じ詳細度の場合、後に書かれたスタイルが優先されます。
最初に定義されたスタイル
後に定義されたスタイル（優先）
ケース3: !important による優先
!important が付いたスタイルが最優先されます。
通常のスタイル
!important が付いたスタイル（最優先）
ケース4: インラインスタイル vs クラス
インラインスタイルは、クラス指定よりも優先されます。
ケース5: 継承と直接指定
直接指定されたスタイルが、継承されたスタイルより優先されます。