Why is there still space at the bottom when when I center a div?

Question

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

div {
  display: inline-block;
}

#cont {
  background-color: grey;
}

#cont>div {
  margin: 5px;
  height: 50px;
  width: 50px;
  background-color: green;
}

<div id="cont">
  <div>
  </div>
</div>

Why is there extra space at the bottom of the green square? Margin is set equally to 5px and there is no padding for the <div id="cont"> element.

Answer 1

It happens because you set all divs to be inline-block. Because of this default value of line-height is applied to them. You can set line-height explicitly in CSS to get rid of extra-margin.

#cont {
  line-height: 0;
}