当我将鼠标悬停在上面时，为什么宽度之间存在差异？

Question

#gallery {
  padding: 2rem 7%;
}

#gallery .row {
  display: flex;
  align-items: center;
  justify-content: center;
}

#gallery .row .col-md-3 {
  position: relative;
  overflow: hidden;
}

#gallery .row .col-md-3 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#gallery .row .content {
  position: absolute;
  background: greenyellow;
  padding: 3rem 2rem;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: translateY(100%);
}

#gallery .row .col-md-3:hover img {
  transform: translateY(-100%);
}

#gallery .row .col-md-3:hover .content {
  transform: translateY(0);
}

.gallery-btn {
  border: 1px solid rgb(94, 21, 21);
  background-color: transparent;
  color: rgb(163, 27, 27);
  font-size: 18px;
  padding: 9px 26px;
}

<section class="gallery mb-4" id="gallery">
  <div class="row text-center mt-4">
    <h3>Our Gallery</h3>
  </div>
  <div class="row text-center mt-4">
    <div class="col-md-3">
      <img src="images/g-img-1.jpg" alt="" />
      <div class="content">
        <h5>Morning Coffee</h5>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
        </p>
        <button type="button" class="btn gallery-btn rounded-0 mt-2">
                            Read More
                        </button>
      </div>
    </div>
    <div class="col-md-3">
      <img src="images/g-img-3.jpg" alt="" />
      <div class="content">
        <h5>Morning Coffee</h5>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
        </p>
        <button type="button" class="btn gallery-btn rounded-0 mt-2">
                            Read More
                        </button>
      </div>
    </div>
    <div class="col-md-3">
      <img src="images/g-img-3.jpg" alt="" />
      <div class="content">
        <h5>Morning Coffee</h5>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
        </p>
        <button type="button" class="btn gallery-btn rounded-0 mt-2">
                            Read More
                        </button>
      </div>
    </div>
  </div>
  <div class="row text-center mt-4">
    <div class="col-md-3">
      <img src="images/g-img-4.jpg" alt="" />
      <div class="content">
        <h5>Morning Coffee</h5>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
        </p>
        <button type="button" class="btn gallery-btn rounded-0 mt-2">
                            Read More
                        </button>
      </div>
    </div>
    <div class="col-md-3">
      <img src="images/g-img-5.jpg" alt="" />
      <div class="content">
        <h5>Morning Coffee</h5>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
        </p>
        <button type="button" class="btn gallery-btn rounded-0 mt-2">
                            Read More
                        </button>
      </div>
    </div>
    <div class="col-md-3">
      <img src="images/g-img-6.jpg" alt="" />
      <div class="content">
        <h5>Morning Coffee</h5>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
        </p>
        <button type="button" class="btn gallery-btn rounded-0 mt-2">
                            Read More
                        </button>
      </div>
    </div>
  </div>
</section>

所以当我将鼠标悬停在图像上时，我发现高度和宽度之间似乎存在差异。

什么问题我想不通，我试过检查，我看到宽度差异。

如果有帮助，我也在使用 bootstrap 5。

感谢任何帮助，谢谢

Answer 1

它正在从某个地方获取填充，这不是一个好习惯，但你可以这样做：

#gallery .row .col-md-3 {
    position: relative;
    margin: 5px 10px;
    padding:0;
    overflow: hidden;
}