Html 如何消除菜单栏和侧导航之间的空间？

如何消除由于键入hello而导致的菜单栏和侧边栏之间的空间

我试过了 显示：内联块；和溢出：隐藏；它去掉了以前的空白，现在用一种颜色填满了它。我还尝试过将content div移动，使其不是.sidebar的父级（？）但“hello”会出现在页面底部。我想让“hello”文本集中在黄色区域，而侧栏和菜单栏之间没有空格

.menucontain{
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr；
栅柱间隙：5px；
颜色：#F2F0D0；
文本对齐：居中；
背景色：#204959；
字体系列：helvetica；
填充：15px；
}
.侧边栏{
背景：#204959；
宽度：18%；
高度：800px；
文本对齐：居中；
颜色：#F2F0D0；
字体系列：helvetica；
显示：网格；
网格模板行：重复（6，50px）；
网格间距：2px；
}
.side1{
背景：灰色；
填充顶部：15px；
}
.内容{
背景色：#F2F0D0；
文本对齐：居中；
溢出：隐藏；
}

菜单1
菜单2
菜单3
菜单4
菜单5
菜单6
你好

关于
博客
销售额
合作伙伴
文件夹
接触

通过将主体声明为网格，将3个不同部分（menucontain、侧栏、内容）重新标记到网格中。如果已经使用网格来设置菜单栏和侧栏的样式，则必须将它们切换到子网格

正文{
保证金：0；
显示：网格；
网格模板列：18vw自动；
网格模板行：最小内容自动；
最小高度：100vh；
}
梅努康丹先生{
格构柱：跨度2；
显示：网格；
网格模板列：重复（6，1fr）；
网格模板行：子网格；
栅柱间隙：5px；
颜色：#F2F0D0；
文本对齐：居中；
背景色：#204959；
字体系列：helvetica；
填充：15px；
}
.侧边栏{
背景：#204959；
高度：800px；
文本对齐：居中；
颜色：#F2F0D0；
字体系列：helvetica；
显示：网格；
网格模板列：子网格；
网格模板行：重复（6，50px）；
网格间距：2px；
}
.side1{
背景：灰色；
填充顶部：15px；
}
.内容{
背景色：#F2F0D0；
文本对齐：居中；
溢出：隐藏；
}

菜单1
菜单2
菜单3
菜单4
菜单5
菜单6
关于
博客
销售额
合作伙伴
文件夹
接触
你好

p标记是一个块元素，要删除空格，必须从“content”类中删除hello

---

在“内容”类上使用flex display或grid display

以下是解决问题的正确方法

首先，按侧栏的顺序移动标签

。像这样：

...
<div class="sidebar">
        <div class="side1">About</div>
        <div class="side1">Blog</div>
        <div class="side1">Sales</div>
        <div class="side1">Partners</div>
        <div class="side1">Portfolio</div>
        <div class="side1">Contact</div>
    </div>

    <p>hello</p>
...

并从

.sidebar

选择器中删除宽度规则-

宽度：18%

。因为我们在上面的网格规则中将宽度定义为18%

.menucontain{
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr；
栅柱间隙：5px；
颜色：#f2f0d0；
文本对齐：居中；
背景色：#204959；
字体系列：helvetica；
填充：15px；
}
.内容{
显示：网格；
网格模板列：18%1fr；
}
.侧边栏{
背景：#204959；
/*宽度：18%*/
高度：800px；
文本对齐：居中；
颜色：#f2f0d0；
字体系列：helvetica；
显示：网格；
网格模板行：重复（6，50px）；
网格间距：2px；
}
.side1{
背景：灰色；
填充顶部：15px；
}
.内容{
背景色：#f2f0d0；
文本对齐：居中；
溢出：隐藏；
}

菜单1
菜单2
菜单3
菜单4
菜单5
菜单6
关于
博客
销售额
合作伙伴
文件夹
接触
你好

这是因为您在导航栏和侧边栏之间添加了它。因此，它遵循实际流量。您必须将侧边栏移到正常流程之外。这在某种程度上是可行的，但我希望能够在黄色区域中使用.content进行书写。@lulz96，没问题。很乐意帮忙。

.content {
    display: grid;
    grid-template-columns: 18% 1fr;
}