如何将子元素边框与父元素边框合并为单一边框？

你遇到的问题是因为.inner元素的上下外边距（margin-top和margin-bottom）让它和父元素.out之间产生了垂直空隙，导致两者的右边框无法衔接，看起来是断开的。下面给你几种实用的解决方案，你可以根据需求选择：

方案一：替换外边距为内边距，让子元素撑满父元素高度 #

这个方案会让.inner的背景区域保持上下间距，同时边框完全衔接：

修改CSS样式：

#main { display: flex } 
.out { 
  height: 50px; 
  border-right: 3px solid green; 
  display: flex; /* 新增：让父元素使用flex布局，方便子元素填充 */
} 
.inner { 
  padding-top: 15px; /* 把margin-top换成padding-top */
  padding-bottom: 5px; /* 把margin-bottom换成padding-bottom */
  margin-top: 0; /* 移除上下外边距 */
  margin-bottom: 0;
  padding-left: 2px;
  padding-right: 2px;
  background-color: rgba(0,0,0,0.1);
  border-right: 3px solid red;
  flex-grow: 1;
  height: 100%; /* 让子元素撑满父元素高度 */
  box-sizing: border-box; /* 确保padding不会超出父元素高度 */
}

调整后，.inner会完全填充.out的高度，上下的间距变成内边距，两个元素的右边框就会完全对齐，视觉上像是合并成一条（如果边框颜色相同会完全重合，不同颜色则会叠加显示）。

方案二：移除子元素的边框，仅保留父元素边框 #

如果只需要一条连续的右边框，最简单的方式就是去掉.inner的右边框，让.out的绿色边框作为唯一的连续边框：

修改.inner的CSS：

.inner {
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 2px;
  background-color: rgba(0,0,0,0.1);
  /* 移除这行：border-right: 3px solid red; */
  flex-grow: 1;
}

这样.out的50px高绿色边框会完整显示，.inner的背景区域依然保留上下空隙，视觉效果符合需求。

方案三：使用负外边距让边框衔接（保留双边框叠加） #

如果想同时保留两个边框的颜色（比如绿色和红色叠加），可以用负外边距让.inner的边框延伸到.out的上下边缘：

修改.inner的CSS：

.inner {
  margin-top: -15px; /* 向上拉伸边框，抵消原margin-top的空隙 */
  margin-bottom: -5px; /* 向下拉伸边框，抵消原margin-bottom的空隙 */
  padding: 2px;
  background-color: rgba(0,0,0,0.1);
  border-right: 3px solid red;
  flex-grow: 1;
  height: calc(100% + 20px); /* 补回负外边距减少的高度，避免内容溢出 */
  box-sizing: border-box;
}

这个方案会让.inner的红色边框和.out的绿色边框完全重合，形成一条叠加的边框，同时.inner的背景区域依然保持原有的上下间距。

内容的提问来源于stack exchange，提问作者Alexander Knyazev