Как подвинуть ребенка к вершине родительского div?

Question

Я сделал коробку с изображением внутри.Проблема в том, что наверху есть белый пробел.Как я могу избавиться от этого?Я попробовал положение: абсолютное, но затем я теряю высоту изображения.И затем изображение проходит через всю коробку.

#elements {
    background-color:#537;
    margin-bottom:2em;
}

#elements .list {
    background-color:#3FF;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width:100%;
    padding-bottom:1em;
}

.productcontainer{
    padding: 0rem;
    text-align: justify;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}

.productcontainer:after{
    content: '';
    display: inline-block;
    width: 100%;
    display:none;
    overflow:hidden;
}

.productcontainer .product{
    display:none;
}

    .product { 
        background: #222;
        margin-bottom: 1rem;
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
        background-color: #f9f3ed;
        box-shadow: 0 0 0 1px #7d5159;
        border-radius: 10px;
    }

    .product:before { 
        content: '';
        display: inline-block;
    }

    .gap {
        display: inline-block;
        vertical-align: top;
        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
    }

.product:hover {
    background-color: #f4e9df;
}

.productimage img {
    width: 100%;
    background-color: #9999;
}

.productdescription {
    position: relative;
    padding: 0.5em;
    background-color: #9393;
}

.shoplogo {
    position: absolute;
    padding: 0.5em;
    bottom: 0;
    right: 0;
    background-color: #5555;
}

<div class="product chair" data-cat="chair">
    <div class="product-wrapper">
        <span class="productimage">
            <img src="https://i.imgur.com/D54hsfY.png" alt="" />
        </span>
        <div class="productdescription">
            <h5>Normann Copenhagen</h5>
            <h7>Go to Blog</h7>
            <span class="shoplogo">
                 <img src="https://i.imgur.com/slzMrkP.png" alt="" />
            </span>
        </div>
    </div>
</div>

https://codepen.io/anon/pen/VxgOXJ

Answer 1

Проблема вызвана этим

.product:before {
    content: '';
    display: inline-block;
}

Это создает пространство, которое не требуется.Отключите это правило.

#elements {
  background-color: #537;
  margin-bottom: 2em;
}

#elements .list {
  background-color: #3FF;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  padding-bottom: 1em;
}

.productcontainer {
  padding: 0rem;
  text-align: justify;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.productcontainer:after {
  content: '';
  display: inline-block;
  width: 100%;
  display: none;
  overflow: hidden;
}

.productcontainer .product {
  display: none;
}

.product {
  background: #222;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
  background-color: #f9f3ed;
  box-shadow: 0 0 0 1px #7d5159;
  border-radius: 10px;
}

.product:before {
  content: '';
  /* display: inline-block; */
}

.gap {
  display: inline-block;
  vertical-align: top;
  width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
}

.product:hover {
  background-color: #f4e9df;
}

.productimage img {
  width: 100%;
  background-color: #9999;
}

.productdescription {
  position: relative;
  padding: 0.5em;
  background-color: #9393;
}

.shoplogo {
  position: absolute;
  padding: 0.5em;
  bottom: 0;
  right: 0;
  background-color: #5555;
}

<div class="product chair" data-cat="chair">
  <div class="product-wrapper">
    <span class="productimage">
            <img src="https://i.imgur.com/D54hsfY.png" alt="" />
        </span>
    <div class="productdescription">
      <h5>Normann Copenhagen</h5>
      <h7>Go to Blog</h7>
      <span class="shoplogo">
                 <img src="https://i.imgur.com/slzMrkP.png" alt="" />
            </span>
    </div>
  </div>
</div>

Answer 2

РЕДАКТИРОВАТЬ: казалось, что ссылка Codepen была сломана, когда я нажал на нее, и она не отображалась правильно.Немного обновлено.

Наверняка решением этой проблемы будет определение цвета фона в контейнере, а не за описанием?Это избавляет от пробела ..

.product { 
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
    background-color: pink;
    box-shadow: 0 0 0 1px #7d5159;
    border-radius: 10px;
}

Я не соответствовал точному цвету, но нашел здесь:

https://jsfiddle.net/aah2402u/1/