Html 页眉元素与内部图像的大小不同（页眉没有定义的高度）

我正在为一个学校项目创建这个网站，我不知道标题有什么问题。由于某些原因，在页眉底部的图像下方有一个小间隙。尽管没有给收割台一个定义的高度。有人知道如何解决这个问题吗

HTML:

这就是它最终的样子：

标题{
文本对齐：居中；
网格区域：标题；
}
#收割台包装{
背景色：红色；
}
.标题img{
宽度：50%；
位置：相对位置；
}

---

默认情况下，图像以内联方式显示，当垂直对齐将图像底部与文本基线对齐时，图像下方会显示一点额外的空间。有几个选项可以解决此问题：

将显示模式更改为“块” 要修复此问题，可以将图像设置为

显示：block

。然后，您可以使用

margin:auto

将图像居中，或者将标题设置为flex容器并

justify content:center

标题{
文本对齐：居中；
网格区域：标题；
}
#收割台包装{
背景色：红色；
}
.标题img{
显示：块；
宽度：50%；
位置：相对位置；
保证金：自动；
}

您的问题不完全可以理解，请提供一个工作示例，例如来自JSFIDDLE的示例。我想知道的是，当标题没有高度时，为什么标题比图像大。默认情况下，它不应该是它内部图像的大小吗？

<header id="header-wrap">
    <img class="header-img" src="../images/header-img.png" alt="">
</header>

header {
   text-align: center;
   grid-area: header;
}
#header-wrap {
   background-color: #212635;
}
.header-img {
   width: 50%;
   position: relative;
}