上下のコンテンツの隙間を調整したい

Question

画像スライドのhtmlとccs
html↓

<div class="container-slider flex">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">

<div class="swiper-slide"><a><img class="container-img-slider "src=" https://oppai1.com/wp-content/uploads/2021/03/StampDecor_146143.gif" alt="" /></a></div>

<div class="swiper-slide"><a><img class="container-img-slider" src=" https://oppai1.com/wp-content/uploads/2021/03/StampDecor_146143.gif" alt="" /></a></div>

<div class="swiper-slide"><a><img class="container-img-slider" src=" https://oppai1.com/wp-content/uploads/2021/03/StampDecor_146143.gif" alt="" /></a></div>

<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container ">
<div class="swiper-wrapper">

<div class="swiper-slide"><a><img class="container-img-slider" src=" https://oppai1.com/wp-content/uploads/2021/03/StampDecor_146143.gif" alt="" /></a></div>

<div class="swiper-slide"><a><img class="container-img-slider" src=" https://oppai1.com/wp-content/uploads/2021/03/StampDecor_146143.gif" alt="" /></a></div>

<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container pc_only">
<div class="swiper-wrapper">
<div class="swiper-slide"><a><img class="container-img-slider" src="img02.jpg" alt="" /></a></div>
<div class="swiper-slide"><a><img class="container-img-slider" src="img01.jpg" alt="" /></a></div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container pc_only">
<div class="swiper-wrapper">
<div class="swiper-slide"><a><img class="container-img-slider" src="img02.jpg" alt="" /></a></div>
<div class="swiper-slide"><a><img class="container-img-slider" src="img01.jpg" alt="" /></a></div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>

<div class="container-slider flex">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">

<div class="swiper-slide"><a><img class="container-img-slider" src=" https://oppai1.com/wp-content/uploads/2021/03/StampDecor_146143.gif" alt="" /></a></div>

<div class="swiper-slide"><a><img class="container-img-slider" src=" https://oppai1.com/wp-content/uploads/2021/03/StampDecor_146143.gif" alt="" /></a></div>

<div class="swiper-slide"><a><img class="container-img-slider" src=" https://oppai1.com/wp-content/uploads/2021/03/StampDecor_146143.gif" alt="" /></a></div>

<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container ">
<div class="swiper-wrapper">

<div class="swiper-slide"><a><img class="container-img-slider" src=" https://oppai1.com/wp-content/uploads/2021/03/StampDecor_146143.gif" alt="" /></a></div>

<div class="swiper-slide"><a><img class="container-img-slider" src=" https://oppai1.com/wp-content/uploads/2021/03/StampDecor_146143.gif" alt="" /></a></div>

<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container pc_only">
<div class="swiper-wrapper">
<div class="swiper-slide"><a><img class="container-img-slider" src="img02.jpg" alt="" /></a></div>
<div class="swiper-slide"><a><img class="container-img-slider" src="img01.jpg" alt="" /></a></div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container pc_only">
<div class="swiper-wrapper">
<div class="swiper-slide"><a><img class="container-img-slider" src="img02.jpg" alt="" /></a></div>
<div class="swiper-slide"><a><img class="container-img-slider" src="img01.jpg" alt="" /></a></div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>

以下ccsです

<style> .container.flex { width: 100%; } .swiper-container { width: 50%; height: fit-content; margin: 5px !important; } .swiper-slide { text-align: center; font-size: 18px; .container-slider { width: 100%; height: 600px; } .flex { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } @media screen and (max-width: 768px) { .pc_only { display: none !important; } } .container-img-slider { width: 100%; height: auto; opacity: 1; transition: transform 0.3s ease; } .zoom{ transform: scale(1.2); } </style> <script type="text/javascript"> $(function(){ $(".container-img-slider").on("click",function(){ $(this).toggleClass('zoom') }) }) </script>

以上

添付画像↓
![イメージ説明]

質問内容

画像スライドを作成
しています。(PC表示四列・スマホ表示二列)
添付画像のように、上下のスライドの隙間が
広いので調整したい。

試行したこと

以下ccsでmarginゼロやauto等しましたが
適応されません。

.swiper-container {
width: 50%;
height: fit-content;
margin: 0px;
}
`

わかる方、よろしくご指導お願いいたします。

Answer 1

以下ccsでmarginゼロやauto等しましたが

適応されません。

.swiper-container {
width: 50%;
height: fit-content;
margin: 0px;
}

↓別の場所で!importantしてるからでは。

.swiper-container {
width: 50%;
height: fit-content;
margin: 5px !important; /* ←これ */
} 

Comments

[Kakakaff1150253]

Lhankor_Mhyさま
ご回答ありがとうございます。
!important;も外しましたが
ダメでした。

[Lhankor_Mhy]

当方の環境では上下がくっつきましたので、ご提示いただいていない部分に原因があると思われます。

[Lhankor_Mhy]

もしかしたら、画像のサイズの問題かもしれないですね。
ご提示のコードの画像と実際のページの画像のサイズが違うとか。

[Kakakaff1150253]

今一度、試してみます。

[Lhankor_Mhy]

あと、コピペミスでしょうけれど、以下のルールが閉じ忘れしていましたよ。
.swiper-slide {
text-align: center;
font-size: 18px;

[Kakakaff1150253]

Lhankor_Mhyさま
ありがとうございます。
閉じ直しました。

全て小さい同じ画像に変えました。
500×500
9KB

再度、ccsを
貼りつけます。

どうしても、上下がくっつかないです。

以下ccs
<style>

.container.flex {
width: 100%;
}

.swiper-container {
width: 50%;
height: fit-content;
margin: 0px ;
}

.swiper-slide {
text-align: center;
font-size: 18px;
}

.container-slider {
width: 100%;
height: 600px;
}

.flex {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}

@media screen and (max-width: 768px) {
.pc_only {
display: none !important;
}
}

.container-img-slider {
width: 100%;
height: auto;
opacity: 1;
transition: transform 0.3s ease;
}

.zoom{
transform: scale(1.2);
}
</style>
<script type="text/javascript">
$(function(){
$(".container-img-slider").on("click",function(){
$(this).toggleClass('zoom')
})
})
</script>

[Lhankor_Mhy]

上記のCSSを試してみましたが、やはり問題が再現しませんでした。

[Kakakaff1150253]

すると、親ccsに
なにかあるかもですね。
承知しました。
すみません、お手数をお掛け致しました。