slick.jsで画像をスライドさせてる画像の下にある余白を消したい。

Question

前提・実現したいこと

slick.jsを使い、画像をスライドさせる。
画像の下にある余白を消したい。

発生している問題・エラーメッセージ

画像の下に無駄な余白が入る。

該当のソースコード

-HTML-

<div class="test-box"> <ul class="slick-box"> <li><img src="images/img1.jpg" alt=""></li> <li><img src="images/img2.jpg" alt=""></li> <li><img src="images/img3.jpg" alt=""></li> <li><img src="images/img4.jpg" alt=""></li> </ul> </div>

-CSS-
.test-box{
background-color: red;
}
.slick-box {
margin: 0;
padding: 0;
}
.slick-box img{
width: 100%;
height: auto;
vertical-align: bottom; /下の余白消し/
}

試したこと

.slick-box imgにvertical-align: bottom;　やdisplay: block;を使用したが下の余白は無くならなかった。

利用している環境

Dreamwever

Comments

[aKusano]

実際に不具合が生じている状態を確認できるものをどこかのサーバにUPしてもらえば回答がつきやすくなると思いますよ。

Answer 1

.slick-box {
margin: 0;
padding: 0;
line-height: 0;
}
で消えないでしょうか。