如何移除两个div边框衔接处的分隔线，实现Windows 95窗口无缝效果

问题原因 #

出现该分隔线的核心原因有两个：

• div.title的左右边框宽度为3px，div.body的左右边框宽度为8px，宽度不一致导致左右边框无法对齐，衔接处出现断层
• 两个相邻元素的边框没有重叠，div.title的底部边框和div.body的顶部边缘存在排列间隔，形成可见缝隙

解决方案 #

方案1：现有代码最小修改

仅调整两个元素的边框属性和边距即可修复：

div.title {
  height: 18px;
  width: 100%;
  background: #000080;
  color: #fff;
  /* 调整左右边框宽度和body一致，保留上下3px边框 */
  border-width: 3px 8px;
  border-style: solid;
  border-color: #bec2c1;
  /* 边框计入元素总宽度，避免撑出父容器 */
  box-sizing: border-box;
  /* 负margin让底部边框和body上沿重叠，消除缝隙 */
  margin-bottom: -3px;
}

div.body {
  padding: 13px 12px 12px;
  height: 100%;
  /* 修正宽度计算：左右边框8px*2 + 左右内边距12px*2 = 40px */
  width: calc(100% - 40px);
  display: inline-block;
  border-bottom: 8px #bec2c1 solid;
  border-left: 8px #bec2c1 solid;
  border-right: 8px #bec2c1 solid;
}

方案2：重构边框逻辑（更稳定）

直接把窗口的整体边框加到父级.box容器上，从根源上避免多元素边框衔接问题：

/* 父容器加统一边框 */
.box {
  width: 500px;
  background: #008284;
  position: absolute;
  top: 50%;
  left: 49%;
  transform: translate(-50%, -50%);
  border: 8px solid #bec2c1;
  box-sizing: border-box;
}

/* 移除title原有边框 */
div.title {
  height: 18px;
  width: 100%;
  background: #000080;
  color: #fff;
}

/* 移除body原有边框 */
div.body {
  padding: 13px 12px 12px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: inline-block;
}

内容的提问来源于stack exchange，提问作者Paul Phillips