嵌套div内容收缩且header下div出现未声明间距该如何解决？

问题根源 #

布局异常是以下几个CSS设置错误导致的：

• header使用grid-template-columns: repeat(2, auto)，auto会根据内容自适应分配宽度，加上你给#balloresize和#menus都加了width:50%的限制，两个子容器都只占自身网格区域的一半，网格剩余空间就变成了多余的默认间距
• 没有重置h2、h3等标题标签的默认外边距，导致内容出现未声明的间距
• 嵌套flex容器没有设置交叉轴对齐方式，内容垂直方向排布混乱

修复后的CSS代码 #

* {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  text-decoration: none;
  /* 新增全局边距重置 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

header {
  display: grid;
  /* 修改为两列各占一半宽度，取消auto自适应 */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  width: 100%;
  column-gap: 0;
  background: #fff;
  /* 新增垂直居中对齐 */
  align-items: center;
  /* 可按需设置header内边距调整上下间距 */
  padding: 10px 20px;
}

#ballo {
  grid-column: 1/2;
}

#balloresize {
  /* 取消50%宽度限制，改为占满父容器 */
  width: 100%;
  /* 取消不合理的30%高度限制 */
  height: auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 15px; /* logo和公司名之间的间距，可按需调整 */
}

#balloicresize {
  /* 固定logo高度，避免变形 */
  height: 40px;
  width: auto;
}

#menus {
  grid-column: 2/3;
  display: flex;
  flex-flow: row nowrap;
  /* 取消50%宽度限制，占满父容器 */
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
}

/* 可选：调整菜单文字样式 */
#menus h3 {
  font-size: 14px;
  font-weight: 500;
}

核心修改点说明 #

• 全局增加margin:0;padding:0;box-sizing:border-box，消除浏览器默认样式带来的未声明间距
• grid列设置改为1fr 1fr，让两个子区域各占header一半宽度，避免auto自适应产生的多余间隙
• 取消两个子容器的width:50%限制，让内容占满分配的网格区域
• 所有flex容器增加align-items:center，让内容垂直居中对齐
• 删除不合理的height:30%设置，改为高度自适应，避免内容被压缩

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