CSS gap 小计

31 阅读1分钟

最近做项目的时候,类似这种设计是很常见的

image.png

之前我的做法都是设置margin,然后在子元素筛选设margin 0,这次智能提示了gap这个属性......(原谅我太菜)

那么这个是干嘛的的,就是用于设置这种间隙的

1.在display:Gird中

gap:10px 表示行列间距都是10px,也可以单独设置row-gap和column-gap.row-gap表示行与行的间距,就是上下关系。column-gap表示列与列间距,就是左右关系。

1.在display:flexbox中

也可以使用gap属性,row-gap和column-gap同上