如何为多个div设置统一外边框并消除父子元素间隙

这个细微间隙是inline-flex容器默认的渲染特性导致的：默认align-items: stretch规则下，flex子项的高度会受内部文本基线对齐、浏览器亚像素舍入计算影响，和父容器的内容盒高度存在极微小的差值，设置了独立背景色的子项会把这个差值区域暴露出来，视觉上就呈现为子元素和父容器边框之间的细缝。

• 方案1（最推荐，改动最小）：给flex容器显式指定纵向对齐方式，绕开基线对齐带来的渲染偏差
  只需要在父容器样式里加一行align-items: flex-start即可，不会改动原有布局逻辑，全浏览器兼容：

  .container {
    display: inline-flex;
    border: 1px solid black;
    align-items: flex-start;
  }
  
  .child {
    padding: 0.5rem;
  }
  
  .child:first-child {
    background-color: red;
  }
  

• 方案2：通过子元素拼接外边框，彻底消除父容器边框和子元素的层级间隙
  去掉父容器的border，转而给所有子元素加同色边框，再用负边距抵消相邻子元素的重复边框，最终形成统一外框，完全不存在间隙问题：

  .container {
    display: inline-flex;
  }
  
  .child {
    padding: 0.5rem;
    border: 1px solid black;
    margin: -1px; /* 抵消相邻边框的宽度，避免出现2px粗边 */
  }
  
  .child:first-child {
    background-color: red;
  }
  

• 方案3：用父容器背景隐藏间隙
  如果不想改动现有布局规则，可以给父容器设置和边框同色的背景，间隙区域会显示成和边框一致的颜色，视觉上完全感知不到缝隙：

  .container {
    display: inline-flex;
    border: 1px solid black;
    background: #000; /* 和边框色保持一致 */
  }
  

日常开发优先选第一个方案，没有冗余代码，也不会影响盒尺寸计算，适配成本最低。

内容的提问来源于stack exchange，提问作者Niclas do