How to move a child against the top of a parent div?

Question

I made a box with an image in it. The problem is, it has a white gap at the top. How can I get rid of it? I tried position:absolute, but then I lose the height of the image. And then the image goes all the way through the box itself.

#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

It would help if you could provide an image of what you want the final result to be exactly — Michael Beeson, May 21 '18 at 14:59

score 1 · Answer 1 · answered May 21 '18 at 15:11

The problem is caused by this

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

It creates a space that is not required. Disable this rule.

#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>

Thanks! But the corners are white in Chrome browser? Also I need the display: inline-block; for https://www.kunkalabs.com/mixitup/ Do you know anything to solve that? — salt_pepper, May 21 '18 at 15:29
@salt_pepper this is because of your border-radius: 10px in product class, unless you trim your image or place it within the curve radius it will always be white in corners — karthik, May 21 '18 at 19:59

score 0 · Answer 2 · answered May 21 '18 at 15:11

EDIT: It seemed that the Codepen link was broken when I clicked on it and it wasn't displaying correctly. Updated slightly.

Surely a solution to this would be to define the background color in the container rather than behind the description? This gets rid of the white space..

.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;
}

I didn't match the exact colour but find here:

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

How to move a child against the top of a parent div?

2 Answers2