CSS

gapで余白を設定しよう

グリッドの間に余白を設定する方法について見ていきます。

  • gap

gap

・グリッドとグリッドの間にに余白が欲しい場合について見ていきたいと思います。

・その場合は親要素にgapというプロパティをつけてあげましょう。

・例えばグリッド間に10pxの余白が欲しい場合、gap: 10px;とするとグリッド間の上下左右に１０pxの余白をつけることができます。

・注意点としてはあくまでもグリッドとグリッドの間の余白なので間でない部分に関してはmarginで指定する必要があります。

・また、縦の余白と横の余白を別々のものにしたい場合は2つの値を与えてあげるといいでしょう。例えばgap:20px 40px;とすると縦に２０pxの余白、横に４０pxの余白をつけることができます。</p

-広告-

 

 






-CSS