HTML container div occupying extra space bellow its child item?

Question

I've got a container div containing a grid of items in this website

However I'm noticing that the parent div is occupying some extra space at the bottom as can be seen in the image bellow.

I don't have any padding or margins on the child div, and when I inspect its size in chrome inspector it seems right.

Here is a minimal codepen to reproduce the issue: codpen link , notice the spacing between the .container-team container div and the next div.

How can I eliminate this spacing?

Answer 1

Remove off the scale transformation from the style of container-team . That is what is causing the issue on your page.

Answer 2

The quick and dirty solution is to just add a negative margin to the parent container:

.container-team {  
  max-width: 1170px;
  width: 100%;
  margin: 0px auto;
  margin-bottom: -25%;
  padding: 0 0px;
  box-sizing: border-box;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

https://codepen.io/anon/pen/eXJNBw?editors=1100

However, the reason you are seeing this extra white space is because you scaled everything by 0.8. Whenever you do a css transform: scale , it creates the layout before doing the scaling, meaning the positioning of the elements is relative to where it was at 1.0 scaling. The reason it's tied to the top is because the css is set to be that way using a transform-origin: top center , which puts the transformed element at the top and center. If you removed this, it would simply scale it all down by 0.8, adding white space to the top and the bottom.

The negative margin fix is fine, but if you want a more robust solution, you should maybe consider scaling each user element down and using margin-left and margin-right instead of scaling the whole thing.

Answer 3

You must add a value for the height in the style corresponding to the element .container-team. The following style can solve the problem:

height: -webkit-fill-available;

Adding any other value for height can also work

height: 100px;

Answer 4

I moved your last div to inside the previous div.

Now you should be able to add the spacing that you want without all that extra spacing: https://codepen.io/anon/pen/BbjyYW?editors=1100

<div style="background-color: #999;"> next item </div>

If you don't want all of that spacing, but you don't want that last div to be inside of the container-team div, nest the container-team div and "next item" div inside of another div, like this:

<div> <div class="container-team"> Container team content </div> <div style="background-color: #999;"> next item </div> </div>