9-容器中行与列之间的间距 · 前端教学笔记[更新中...]

# 9. 容器中的轨道间距 [toc] ## 9.1 属性 | 序号 | 属性 | 描述 | | ---- | ------------------- | -------------------------- | | 1 | `column-gap` | 列间距 | | 2 | `row-gap` | 行间距 | | 3 | `gap 行间距列间距` | 简写:行列相等,可只写一个值 | --- ## 9.2 示例 ![](https://img.kancloud.cn/06/24/06249c2bbb5459f3704b1353e6eb6ea5_1210x1228.jpg) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>设置容器中行与列之间的间距/间隙</title> <style> .container { width: 400px; height: 400px; background-color: wheat; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); /* 项目在单元格中拉伸 */ place-items: stretch; /* 设置网格间隙 */ column-gap: 5px; row-gap: 5px; /* 简写 */ /* gap: 行间距列间距 */ gap: 5px 5px; /* 行与列相等,可只写一个值 */ gap: 5px; /* 完美解决 */ } .item { background-color: violet; font-size: 2rem; /* 任务: 行与之间设置5px的间距 */ /* 方法2: margin */ /* margin: 5px; */ /* 存在以下二个问题 1. 与容器边界相邻的单元格存在5px间隙,这并不是我需要的 2. 单元格之间的5px间隙被叠加计算, 实际上10px,不满足需要 */ /* 方法2: 项目设置padding,裁切背景区域 */ /* padding: 5px; */ /* background-clip: content-box; */ /* 存在以下三个问题前二个问题与margin是完全一样的第三个问题是内容与背景边沿贴合,用户体验,视觉效果非常差,显然不符合要求针对这个问题, Grid提供了一个终级解决方案, 在容器上设置网格间隙 */ } </style> </head> <body> <div class="container"> <span class="item item1">1</span> <span class="item item2">2</span> <span class="item item3">3</span> <span class="item item4">4</span> <span class="item item5">5</span> <span class="item item6">6</span> <span class="item item7">7</span> <span class="item item8">8</span> <span class="item item9">9</span> </div> </body> </html> ```