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

Question

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 class='imageContainer'>
  <div class="stickyContainer blackGradient">
    <h1 class='imageTitle'></h1>
    <img class='uploadedImg' src='' alt='Random image' />
    <a class='specialA' href=''></a>
  </div>
</div>

I don't think it's a margin or padding problem, those are 0. — Onyx, Jul 02 '18 at 13:38
it's because you inner element is inline-block, it will add a space — Pete, Jul 02 '18 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. — Onyx, Jul 02 '18 at 13:59

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

0 Answers0