CSSのgapプロパティは、要素間の間隔を簡単に調整できる便利な機能ですが、
期待通りに動作しないことがあります。
特に、display: flex;やdisplay: grid;を指定していない場合、gapを設定しても反映されません。
1. gapが効かないケース
単にgapを指定しても間隔が空かないことがあります。
これは、gapが適用されるのがflexコンテナまたはgridコンテナに限られるためです。
2. display: flex; を追加すると解決！
gapを正しく反映させるには、display: flex;を指定する必要があります。
また、gridを使用する場合も同様にgapが有効になります。
3. gapを適用したい場合の注意点
gapはdisplay: flex;またはdisplay: grid;の要素にのみ適用される。
inline-flexやinline-gridでもgapは適用可能。
display: block;やinline-block;ではgapは反映されない。
まとめ
✅ gapは flex や grid のコンテナでないと適用されない。
✅ display: flex; を追加すると、要素間の間隔を簡単に調整できる。
✅ gridでも同様に gap を適用可能。
CSSのgapを使うと、余白調整がシンプルになるので、ぜひ活用してみてください！