css hiding image with height 0px padding between images visible

Question

I'm designing my own image caurosel like so

<div id="hero">
            <img src="/media/cache/e8/a1/e8a14b82a60adab8660f02578912dc32.jpg" alt="" class="img-fluid active" counter="1">
            <img src="/media/cache/5b/e5/5be5f19b0c31dd45c45fa330f2467963.jpg" alt="" class="img-fluid" counter="2">
            <img src="/media/cache/59/d5/59d55cfcd64efa13542489db2b4799ca.jpg" alt="" class="img-fluid" counter="3">
            <img src="/media/cache/50/42/5042ef852e2058a6bda2d768758d11c6.jpg" alt="" class="img-fluid" counter="4">
            <img src="/media/cache/d1/10/d1101f0f401a4c52ddbd108548881d41.jpg" alt="" class="img-fluid" counter="5">
...
</div>

css like this

#hero img{
    height: 0px;
    margin: 0px;
    padding: 0px;
    opacity: 0;
    transition: all ease 1s;
}

#hero img.active {
    height: auto;
    margin: 0px;
    padding: 0px;
    opacity: 1;
    transition: all ease 1s;
}

with the intended effect looking like these

the images shows how the first image, one in the middle and the last look. There's some padding for the images "hidden" with height 0px and no margins or paddings but they still occupy some space. I don't want to go with display none because I need transition effects.

I'm also using bootstrap v5.0

Answer 1

I think those extra spaces are the whitespaces between the tags. Try some of these:

#hero img {
   display:block /*(or inline-block)*/
}

or

#hero {
   font-size:0;
}

or (not recommended at all) remove all whitespaces inside the container div. Something like:

<div><img src="..."><img src="..."></div>