Html 在网格中的图像之间专门添加2px边框

我使用响应网格来显示图像，我的目标是在图像之间专门添加一个2px的边框（它们“接触”的地方），而不会出现在网格的外部。

/*
----------*网格*----------
*/
.cbp rfgrid{
保证金：0；
填充：0；
列表样式：无；
位置：相对位置；
宽度：100%；
}
.美国海关与边境保护局{
位置：相对位置；
浮动：左；
溢出：隐藏；
宽度：33.3333%；/*回退*/
宽度：-webkit计算（100%/3）；
宽度：计算值（100%/3）；
}
.美国海关与边境保护局，
.美国海关与边境保护局{
显示：块；
宽度：100%；
光标：指针；
}
.美国海关与边境保护局{
最大宽度：100%；
}
/*Flexbox用于使标题居中*/
.美国海关与边境保护局{
位置：绝对位置；
左：0px；
顶部：0px；
右：0px；
底部：0px；
背景：rgba（255255,1）；
显示：-webkit flex；
显示：-moz flex；
显示：-ms flex；
显示器：flex；
-webkit对齐项目：居中；
-moz对齐项目：居中；
-ms对齐项目：居中；
对齐项目：居中；
文本对齐：居中；
不透明度：0；
}
.cbp RFLI a：悬停分区{
不透明度：1；
}
.美国海关与边境保护局区域情报室a分区h3{
宽度：100%；
颜色：#000；
填充：0 10px；
}
@介质（最大宽度：767px）{
.美国海关与边境保护局区域情报室a分区h3{
字号：2.375em；
}
}
@介质（最小宽度：768px）{
.美国海关与边境保护局区域情报室a分区h3{
字体大小：3.375em；
}
}
/*媒体查询示例：更改每行的项目数*/
@媒体屏幕和屏幕（最大宽度：767px）{
.美国海关与边境保护局{
宽度：100%；
}
}

您可以使用纯flexbox实现这一点-

下面是一个代码片段，其中包含基于您的代码的简化代码

/*
----------*网格*----------
*/
*,
*：：之前，
*：：之后{
框大小：边框框
}
.cbp rfgrid{
显示器：flex；
柔性包装：包装；
证明内容：中心；
宽度：100%；
保证金：0；
填充：0；
}
.美国海关与边境保护局{
弹性：0.30%；
保证金：5px；
边框：2倍纯红；
位置：相对位置；
列表样式：无
}
.美国海关与边境保护局{
最大宽度：100%；
显示：块
}
.美国海关与边境保护局{
不透明度：0；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
显示器：flex；
对齐项目：居中；
调整内容：中心
}
.cbp RFLI a：悬停分区{
不透明度：1；
背景：白色
}
@介质（最大宽度：767px）{
.美国海关与边境保护局{
弹性：0 100%
}
}

您可以使用纯flexbox实现这一点-

下面是一个代码片段，其中包含基于您的代码的简化代码

/*
----------*网格*----------
*/
*,
*：：之前，
*：：之后{
框大小：边框框
}
.cbp rfgrid{
显示器：flex；
柔性包装：包装；
证明内容：中心；
宽度：100%；
保证金：0；
填充：0；
}
.美国海关与边境保护局{
弹性：0.30%；
保证金：5px；
边框：2倍纯红；
位置：相对位置；
列表样式：无
}
.美国海关与边境保护局{
最大宽度：100%；
显示：块
}
.美国海关与边境保护局{
不透明度：0；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
显示器：flex；
对齐项目：居中；
调整内容：中心
}
.cbp RFLI a：悬停分区{
不透明度：1；
背景：白色
}
@介质（最大宽度：767px）{
.美国海关与边境保护局{
弹性：0 100%
}
}

您的旁注似乎是您问题中的关键信息：

（尽管网格是全宽的，Codepen还是增加了8px的边距，所以防止它变成10px边距是我的目标：））

这并不是Codepen增加了边距。这是浏览器

大多数（如果不是全部的话）浏览器都给

主体

元素一个8px的边距。这在他们的生活中

您可以自己重写此规则。只需将其添加到代码中：

body { margin: 0; }

此外，内容框的默认设置为

。这意味着您应用的宽度和高度计算将仅包括内容框。填充和边框将分别添加

您可以使用
框大小：边框框
替代此设置，它告诉浏览器您的宽度和高度设置必须包括内容框、填充框和边框框。换言之，所有的东西都到了边境

（页边距始终单独添加。）

以下是CSS框模型的图示：


你的旁注似乎是你问题中的关键信息：

（尽管网格是全宽的，Codepen还是增加了8px的边距，所以防止它变成10px边距是我的目标：））

这并不是Codepen增加了边距。这是浏览器

大多数（如果不是全部的话）浏览器都给
主体
元素一个8px的边距。这在他们的生活中

您可以自己重写此规则。只需将其添加到代码中：

body { margin: 0; }

此外，内容框的默认设置为
。这意味着您应用的宽度和高度计算将仅包括内容框。填充和边框将分别添加

您可以使用
框大小：边框框
替代此设置，它告诉浏览器您的宽度和高度设置必须包括内容框、填充框和边框框。换言之，所有的东西都到了边境

（页边距始终单独添加。）

以下是CSS框模型的图示：


感谢您的建议和示例！我只需要让网格占据整个窗口的宽度&然后一切都很好，只要做数学。30%（或您想要的值）wi