html - 向上翻译该 div 时，如何去除该 div 下方的空白？

Question

我已经将图像向上移动到 div 后面以使其适合设计，但是它在其下方留下了一个空白区域，原始图像所在的位置。我将如何解决这个问题？

这是一个网站，我试过翻译站点地图，但是站点地图下面有更多的空白区域。

HTML:

<div class="portfolioImage" id="images">
            <div class="portLogoImages" id="myDIV5">
                <img src="./resources/portfolio/logoportfolio/logoPortfolio1.png" alt="" class="portfolioImages">
                <img src="./resources/portfolio/logoportfolio/logoPortfolio2.png" alt="" class="portfolioImages">
                <img src="./resources/portfolio/logoportfolio/logoPortfolio3.png" alt="" class="portfolioImages">
                <img src="./resources/portfolio/logoportfolio/logoPortfolio4.png" alt="" class="portfolioImages">
                <img src="./resources/portfolio/logoportfolio/logoPortfolio5.png" alt="" class="portfolioImages">
            </div>
</div>

<div class="sitemap portAdjustment"> <!-- SITEMAP -->
        <div class="sitemapItems">
            <img src="./resources/sitemapLogo.png" alt="" class="sitemapLogo" width="166.3px" height="22px">
            <div class="links">
                <a href="./index.html"><p >Home</p></a>
                <a href="./index.html"><p>Products</p></a>
                <a href="./portfolio.html"><p>Portfolio</p></a>
                <a href="./aboutus.html"><p>About Us</p></a>
                <a href="./aboutus.html"><p>Contact Us</p></a>
            </div>
            <div class="finePrint">
                <p>X is a part of the family company X that specialises in custom made design ranging from logo design to apparel design.</p>
                <p>X</p>
            </div>
        </div>
    </div>

CSS:

.portfolioImages {
  border: none;
  font-size: 0px;
  transform: translateY(-25px);
  max-width: 100%;
}

.portLogoImages {
  border: none;
  font-size: 0px;
  transform: translateY(-25px);
  max-width: 100%;
  height: auto;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


.sitemap {
  width: 100%;
  height: 215px;
  background-color: #f4f4f4;
  padding: 30px 0px 30px 0px;
  display: block;
  text-align: center;
}

.finePrint {
  padding-top: 70px;
  color: #c8c8c8;
}

.sitemapItems {
  padding: 0px 30px 0 30px;
  display: block;
}

.sitemap a {
  text-decoration: none;
  color: #c8c8c8;
  transition-duration: .2s;
  display: inline-block;
  padding-right: 4px;
}

.sitemap a:hover {
  text-decoration: underline;
  color: #434343;
}

我希望没有空白，但它下面仍然有空白。

Answer 1

只需使用 margin-top 代替 transform