gap属性控制网格行与列之间的间隙

Misnice

已于 2024-03-22 10:33:36 修改

阅读量314

点赞数 1

分类专栏： CSS 文章标签： css 前端

于 2024-03-08 20:29:31 首次发布

本文链接：https://blog.csdn.net/misnice/article/details/136571381

版权

CSS 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

本文详细介绍了CSSgap属性的作用，用于设置Flex和Grid布局中行与列间的间隙，支持长度值、百分比值以及混合使用，同时列举了各种合法的语法实例和全局值处理。

摘要由CSDN通过智能技术生成

gap 属性是用来设置网格行与列之间的间隙，该属性是 row-gap 和 column-gap 的简写形式。

适用于Flex布局、Grid布局、多列布局。

语法：

/* One <length> value */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/* One <percentage> value */
gap: 16%;
gap: 100%;

/* Two <length> values */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* One or two <percentage> values */
gap: 16% 100%;
gap: 21px 82%;

/* calc() values */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/* Global values */
gap: inherit;
gap: initial;
gap: revert;
gap: revert-layer;
gap: unset;