为什么图像和边框之间有多余的空间？我该如何删除它？

Question

网站 我正在尝试制作一个网站，当我向其添加图像时，我正在处理的一侧会变得更大。如何去除图像两侧的多余空间？我希望空间在 20 像素左右，因为它位于图像顶部。

aside {
  display: flex;
  grid-area: as;
  background-color: aquamarine;
  border-radius: 20px;
  padding: 20px;
  justify-content: center;
  align-items: flex-start;
}

#asideImg{
  display: block;
  object-fit: scale-down;
  border-radius: 20px;
}

<div class="container">
  <header>
    <a href="/Main.html"
      ><img src="/media/spöke.png" alt="logga" id="mainLogo"
    /></a>
    <h1 id="headerText">Min Halloweensida</h1>
  </header>
  <nav>
    <a href="/Pg2.html">Pg2</a>
    <a href="/Pg3.html">Pg3</a>
    <a href="/Pg4.html">Pg4</a>
  </nav>
  <aside><img src="/media/pumpa.jpg" alt="pumpa" id="asideImg"></aside>
  <main>main</main>
  <footer>footer</footer>
</div>

我尝试在旁边设置固定宽度，但随后多余的空间会移动到间隙。

Answer 1

在容器上使用

display: flex;

时，容器本身就像一个块元素并占据整个可用宽度。

您可以使用

display: inline-flex;

来代替，因此它的宽度仅与其内容一样宽，加上任何边距等。例如：

aside {
  display: inline-flex; /* <---- here */
  grid-area: as;
  background-color: aquamarine;
  border-radius: 20px;
  padding: 20px;
  justify-content: center;
  align-items: flex-start;
}

#asideImg{
  display: block;
  object-fit: scale-down;
  border-radius: 20px;
}

<div class="container">
  <header>
    <a href="/Main.html"
      ><img src="/media/spöke.png" alt="logga" id="mainLogo"
    /></a>
    <h1 id="headerText">Min Halloweensida</h1>
  </header>
  <nav>
    <a href="/Pg2.html">Pg2</a>
    <a href="/Pg3.html">Pg3</a>
    <a href="/Pg4.html">Pg4</a>
  </nav>
  <aside><img src="/media/pumpa.jpg" alt="pumpa" id="asideImg"></aside>
  <main>main</main>
  <footer>footer</footer>
</div>