我的图库底部有白色space

Question

我的 .gallery-mosaic div 底部有不需要的白色 space。是什么原因造成的，我怎样才能摆脱白色 space？ ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... .....................................


    <section class="intro">
        <nav>
          <a href="#" id="menu-icon"></a>
          <ul>
            <li><a href="#about">About Me</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact Me</a></li>
          </ul>
        </nav>
    
        <div class="inner">
          <div class="content">
            <h1>Tenasi Art</h1>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>
        </div>
      </section>
      <a name="about">
    
      <div class="clearfix"></div>
        <section class="left-col">
          <h2>About the Photographer</h2>
          <p style="text-indent:5%;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eligendi ab quam necessitatibus. Aspernatur temporibus laudantium cum, aliquid libero, perferendis placeat illum aperiam atque doloremque, architecto molestiae voluptatibus beatae quidem ipsam. Fuga, nemo aperiam nostrum sint autem iusto praesentium deleniti rem, soluta eum voluptatibus voluptas fugiat, assumenda necessitatibus labore. Blanditiis!</p>
        </section>
    
        <section class="right-col">
          <img src="#" alt="Latricia Muhammad">
        </section>
    
      <div class="clearfix"></div>
      <a name="gallery"></a>
        <h2>Tenasi Art Gallery</h2>
    
        <section class="gallery-mosaic">
          <div class="images">
    
            <a href="images/img1.jpg" class="img-1">
              <i class="icon ion-md-expand"></i>
            </a>
            <a href="images/img2.jpg" class="img-2">
              <i class="icon ion-md-expand"></i>
            </a>
            <a href="images/img3.jpg" class="img-3">
              <i class="icon ion-md-expand"></i>
            </a>
            <a href="images/img4.jpg" class="img-4">
              <i class="icon ion-md-expand"></i>
            </a>
            <a href="images/img5.jpg" class="img-5">
              <i class="icon ion-md-expand"></i>
            </a>
            <a href="images/img6.jpg" class="img-6">
              <i class="icon ion-md-expand"></i>
            </a>
            <a href="images/img7.jpg" class="img-7">
              <i class="icon ion-md-expand"></i>
            </a>
            <a href="images/img8.jpg" class="img-8">
              <i class="icon ion-md-expand"></i>
            </a>
    
    
          </div>
        </section>
    
        <div class="see-all">
          <a href="#">See All</a>
        </div>
    
    <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
    ```    
    
     ```lang-css
        body {
          font-family:'IBM Plex Sans', sans-serif;
          margin:0;
          padding:0;
          box-sizing: border-box;
          width:100%;
        }
        
        h1,h2,h3,h4,h5,h6 {
          font-weight:bolder;
        
        }
        
        h1{
          font-size:55px;
        }
        h2{
          font-size:44px;
        }
        h3{
          font-size:36;
        }
        h4{
          font-size:27;
        }
        h5{
          font-size:20;
        }
        h6{
          font-size:16;
        }
        
        
                  /* START GALLERY */
        
        .gallery-mosaic{
          width:100%;
          max-width:120rem;
          margin:auto;
          padding:0 1.5rem;
          /* background-color: purple; */
        
        }
        
        .images{
          /* background-color: green; */
          display:grid;
          grid-template-columns: 1fr 1fr 1fr 1fr;
          grid-template-rows: auto;
          grid-gap:1.5rem;
          grid-template-areas:
          'img-1 img-2 img-3 img-3'
          'img-1 img-4 img-4 img-6'
          'img-7 img-7 img-8 img-6'
        }
        
        .images a{
          width:100%;
          /* height:25rem; */
          background-position: center;
          background-repeat: no-repeat;
          background-size:cover;
          position:relative;
          display:flex;
          align-items:center;
          justify-content:center;
          text-decoration:none;
          color:rgba(255,255,255,.02);
        }
        
        .images a ion-icon{
          color:rgba(255,255,255, .6);
          font-size:3rem;
          position:relative;
          z-index:100;
          padding:1rem 3rem;
          border:20px solid rgba(255,255,255, .6);
          border-radius:.4rem;
          opacity:0;
          transition:opacity .5s;
        
        }
        
        .images a::before{
          content:'';
          position:absolute;
          height:100%;
          width:100%;
          top:0;
          left:0;
          background-color: rgba(0,0,0,.8);
          opacity:0;
          transition:opacity .5s;
        }
        
        .images a:hover i, .images a:hover::before{
          opacity:1;
        }
        
        .img-1{
          grid-area:img-1;
          min-height:51.5rem;
          background-image: url('images/img1.jpg');
        }
        .img-2{
          grid-area:img-2;
          background-image: url('images/img2.jpg');
        }
        .img-3{
          grid-area:img-3;
          background-image: url('images/img3.jpg');
        }
        .img-4{
          grid-area:img-4;
          background-image: url('images/img4.jpg');
        }
        .img-5{
          grid-area:img-5;
          background-image: url('images/img5.jpg');
        }
        .img-6{
          grid-area:img-6;
          min-height:51.5rem;
          background-image: url('images/img6.jpg');
        }
        .img-7{
          grid-area:img-7;
          background-image: url('images/img7.jpg');
        }
        .img-8{
          grid-area:img-8;
          background-image: url('images/img8.jpg');
        }
        
        .see-all{
          /* background-color: red; */
        }

Answer 1

看来是这行代码导致了那个白space:

<a href="images/img5.jpg" class="img-5">
    <i class="icon ion-md-expand"></i>
</a>

我删除了那条线，白色 space 消失了。您没有在网格中使用该图像。您的 grid-template-areas.

中没有 img-5

我的图库底部有白色space

There is white space at the bottom of my gallery

html

css

whitespace

removing-whitespace

responsive-images