aタグ内の画像とテキストの間の隙間を無くしたい

Question

aタグ内に、画像とテキストがあるが、これら要素の間に謎の隙間があり、そこにマウスオーバーするとホバーが外れてしまう。（リンクが当たっていない状態になる。）
aタグ内全てでマウスオーバーされた状態を保ちたい。

<section class="works">
    <h2 class="top-heading">WORKS</h2>
    <h3 class="top-heading-secondary">最新の施工実績</h3>
    <div class="works-carousel slick-box">
      <figure class="carousel-item"><a href="#">
          <div class="hover-expand-outer"><img class="hover-expand" src="img/works1.jpg" alt="施工実績の写真1"></div><br>
          <p class="works-title">工事名1タイトルタイトルタイトルタイトル</p>
        </a></figure>
      <figure class="carousel-item"><a href="#">
          <div class="hover-expand-outer"><img class="hover-expand" src="img/works2.jpg" alt="施工実績の写真2"></div><br>
          <p class="works-title">工事名2タイトルタイトルタイトルタイトル</p>
        </a></figure>
      <figure class="carousel-item"><a href="#">
          <div class="hover-expand-outer"><img class="hover-expand" src="img/works3.jpg" alt="施工実績の写真3"></div><br>
          <p class="works-title">工事名3タイトルタイトルタイトルタイトル</p>
        </a></figure>
      <figure class="carousel-item"><a href="#">
          <div class="hover-expand-outer"><img class="hover-expand" src="img/works4.jpg" alt="施工実績の写真4"></div><br>
          <p class="works-title">工事名4タイトルタイトルタイトルタイトル</p>
        </a></figure>
      <figure class="carousel-item"><a href="#">
          <div class="hover-expand-outer"><img class="hover-expand" src="img/works5.jpg" alt="施工実績の写真5"></div><br>
          <p class="works-title">工事名5タイトルタイトルタイトルタイトル</p>
        </a></figure>
      <figure class="carousel-item"><a href="#">
          <div class="hover-expand-outer"><img class="hover-expand" src="img/works6.jpg" alt="施工実績の写真6"></div><br>
          <p class="works-title">工事名6タイトルタイトルタイトルタイトル</p>
        </a></figure>
      <figure class="carousel-item"><a href="#">
          <div class="hover-expand-outer"><img class="hover-expand" src="img/works7.jpg" alt="施工実績の写真7"></div><br>
          <p class="works-title">工事名7タイトルタイトルタイトルタイトル</p>
        </a></figure>
    </div><!-- /works-carousel -->
    <div class="btn-wrapper">
      <a class="button_base simple_rollover">もっと見る</a>
    </div>
  </section><!-- /works -->

.slick-box {
  position: relative;//矢印の親

  //矢印のスタイル
  .prev-arrow, .next-arrow { //jsで矢印クラスを作成
    z-index: 10;
    display: block;
    position: absolute;
    content: '';
    width: 30px;
    height: 30px;
    top: 50%;
    margin-top: -15px;

    &:hover {
      opacity: 0.7;
    }

  }
  .prev-arrow {
    border-left: solid 5px #333;
    border-bottom: solid 5px #333;
    left: 50px;
    transform: (translateY(-50%) rotate(45deg));
    padding: 10px;

  }
  .next-arrow {
    border-right: solid 5px #333;
    border-bottom: solid 5px #333;
    right: 50px;
    transform: (translateY(-50%) rotate(-45deg));
    padding: 10px;
  }

  .works-title {
    height: 30px;
  }
}

.hover-expand-outer {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}

.hover-expand {
  transition-duration: 0.5s;
}

a:hover .hover-expand {
  transform: scale(1.2,1.2); /*画像の拡大*/
  backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

  <script type="text/javascript">
    $(function () {
      $('.slick-box').slick({
        prevArrow: '<span class="slide-arrow prev-arrow"></span>',
        nextArrow: '<span class="slide-arrow next-arrow"></span>',
        centerMode: true, //センターモード
        centerPadding: '0px', //前後のパディング
        autoplay: true, //オートプレイ
        autoplaySpeed: 3000, //オートプレイの切り替わり時間
        slidesToShow: 3,
        responsive: [{
          breakpoint: 768,
          settings: {
            arrows: false, // 前後の矢印非表示
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 3
          }
        },
        {
          breakpoint: 480,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 1
          }
        }]
      });
    });
  </script>

↓画像とテキストの間にポインターを当てると、ホバーアクションが外れてしまいます。

Comments

[m.ts10806]

提示されているCSSはSCSSですよね。
コンパイル後のCSSを提示されたほうがアドバイスは得られやすくなると思います。
また、タグにいろいろつけられてはいますが「JavaScript」または「jQueryプラグイン」のタグのほうが必要ではないでしょうか？
slickの問題にも見えます。

Answer 1

画像とテキストの間に改行コード <br> があるからでは。

画像とテキストの間をあけたいなら、テキストのCSSに padding-top を設定するなどして調整すればいいかと。

Comments

[Web-Fuji]

ありがとうございました。
原因は<br>が入っていたからでした。
また、paddingのアドバイスもありがとうございます！