html的div上下有空白,在不设置border 时这个外层div 上下为什么出现空白？

(图1)div.wrap 上下出现一段空白，浏览器窗口的滚动条滚到下面可以看到下面也有一条等长的空白，似乎与顶栏高度相同。

在设置border 之后可以消除(图2)，加上box-sizing:border-box可以去掉浏览器滚动条。

怀疑跟wrap 内部的子元素有关。初学者，为了实现效果一边搜一边做，混用了一堆东西~

页面代码如下：

DocTalk

TITLE TEXT 标题栏

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

JIFJRIJFIJRIJF

CSS:

html, body {

margin: 0;

height: 100%;

width: 100%;

font-size: 12pt;

}

.wrap {

position: relative;

/* wrap 最大高宽比4:3, 屏幕居中 */

height:100vh;

max-width: 75vh;

margin:0 auto 0 auto;

/* debug */

box-sizing: border-box;

border: solid 1px;

}

.top-bar {

box-sizing: border-box;

position: absolute;

top: 0;

height:2rem;

width:100%;

background: seashell;

border-bottom: solid 2px;

}

.top-bar div {

vertical-align: top;

}

.extra-btn {

display: inline-block;

box-sizing: border-box;

border-style: solid;

border-width: 0 0 0.8rem 2rem;

border-left-color: maroon;

border-bottom-color: transparent;

height: 100%;

width:2rem;

transition: border-left-color 0.2s;

transition-timing-function: ease-out;

}

/*

.extra-btn:hover {

border-left-color: slategray;

}

*/

.extra-btn:active {

border-left-color: violet;

}

.title {

position: absolute;

display: inline-block;

height: 100%;

left: 2rem;

right: 0;

}

/* 实现标题文字居中 */

.title .text-wrap {

display: flex;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

justify-content: center;/*水平居中*/

align-items:center; /*垂直居中*/

}

.title-text {

font-size: 1.25rem;

font-family:"Times New Roman";

}

.content-box {

box-sizing: border-box;

width:100%;

height:calc(100% - 2rem);

margin-top:2rem;

padding-right: 8px; /*y滚动条的空间*/

overflow-y: scroll;

overflow-x: hidden;

background: seashell;

}

/*自定义content-box y滚动条*/

.content-box::-webkit-scrollbar

{

width: 8px;

background-color: #F5F5F5;

}

.content-box::-webkit-scrollbar-track

{

border-radius: 2px;

background-color: #F5F5F5;

}

.content-box::-webkit-scrollbar-thumb

{

border-radius: 2px;

background-color: #555;

}

将.wrap 定义中那行border 设置删除，或将border 宽度设为零就会导制wrap 上下出现空白。

去掉wrap 边框，出现空白

加上边框后上部紧贴窗口

emmm~老实说这问题我完全不知道该用什么关键词去搜~~