如何让带inset边框的div及其子div垂直排列时左、顶部完全贴合无间隙

问题根因 #

1. relative定位特性导致间隙：position: relative属性不会让元素脱离正常文档流，你为子元素设置的top偏移只是让元素视觉上发生位移，它在原文档流中的占位仍然保留。你当前的代码里子元素#location默认在父元素#head的内容区域占位，你又给它设置了等于#head高度的top值，相当于元素向下偏移了一个父元素高度，原本的占位就空出了间隙，叠加每个.windows元素自带的3px边框，最终就出现了你看到的间隔。
2. 结构与定位逻辑不匹配：你要实现的是多个独立区块的类表格布局，但用了层层嵌套的div结构，子元素默认被限制在父元素内容区域内，强行用top偏移出父元素自然会出现布局异常。

修复方案 #

快速修复现有代码 #

如果要保留现有的嵌套结构和定位逻辑，只需要把.windows的定位属性改为absolute即可：

.windows {
    box-sizing: border-box;
    display: block; 
    /* 把relative改为absolute */
    position: absolute;
    border: 3px inset gold;
    background-color: maroon;
}

position: absolute会让元素脱离文档流，top偏移不会保留原位置占位，同时记得给需要作为定位基准的父元素（比如body）添加position: relative，避免元素相对于视口定位出现错位。

更合理的实现方案（推荐） #

直接用CSS Grid实现类表格布局，不需要复杂的定位配置，也不会出现间隙问题：

1. 先调整HTML结构，把嵌套的div改为平级结构：

<div class="layout-container">
    <div class="windows" id="head"></div>
    <div class="windows" id="location"></div>
    <div class="windows" id="character"></div>
    <div class="windows" id="buttons"></div>
    <div class="windows" id="textbox"></div>
    <div class="windows" id="map"></div>
</div>

2. 替换原有定位相关的CSS：

html {
    background-color: black;
    font-family: gabriela;
    /* 原属性名错误，text-color改为color */
    color: black;
}
body {
    margin: 0;
    width: 100vw;
    height: 100vh;
}
div {
    padding: 0;
    margin: 0;
}
.layout-container {
    display: grid;
    /* 左侧列宽380px，右侧列占剩余全部宽度 */
    grid-template-columns: 380px 1fr;
    /* 按你的区块高度要求设置行高，可按需调整 */
    grid-template-rows: max(150px, 15vh) max(100px, 10vh) auto auto auto;
    width: 100%;
    height: 100%;
}
.windows {
    box-sizing: border-box;
    border: 3px inset gold;
    background-color: maroon;
}
#location {
    background-color: purple;
}
#map {
    /* map占右侧全部行 */
    grid-row: 1 / -1;
    grid-column: 2 / 3;
}

额外优化提示 #

你原有代码里CSS属性text-color是无效属性，正确属性名为color，body规则中重复写了两次padding: 0可以删除冗余。

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