My imageContainer div is slightly bigger height that the elements it contains which makes it look as if there's a space between top and bottom divs [duplicate]

This question already has an answer here:

My imageContainer div is slightly bigger in height than the elements it contains which makes it look as if there's a space between top and bottom divs. Any idea what might cause this?

.imageContainer {
text-align: center;
position: relative;
width: 100%;
}

.stickyContainer {
display: inline-block;
position: relative;
z-index: 2;
}

.blackGradient:after {
content: '';
display: block;
position: absolute;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
top: 0;
height: 100%;
width: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(53%, rgba(120, 120, 120, 0)), to(black));
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(120, 120, 120, 0) 53%, black 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000', GradientType=0);
overflow: hidden;
z-index: 1;
}

.blackGradient:hover:after {
opacity: 1;
}

</div>

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

I don't think it's a margin or padding problem, those are 0.
– Bobimaru
Jul 2 at 13:38

There's default margin on h1 tag
– Nandita Arora Sharma
Jul 2 at 13:43

My h1 doesn't have a margin either. So that's not it
– Bobimaru
Jul 2 at 13:47

it's because you inner element is inline-block, it will add a space
– Pete
Jul 2 at 13:52

Pete was right, it's because of the inline-block on stickyContainer. Thanks Pete, create an answer so I can select it as correct answer.
– Bobimaru
Jul 2 at 13:59