How to make a div same height as glyphicon contents?

Question

In this simple example, the inner tag has height 14px, but the outer tag has height 20px. How can I make the container tag have the same height as its child? I tried setting the div to inline-block, but that didn't do anything.

<div>
    <i class="glyphicon glyphicon-folder-close"></i>
</div>

Answer 1

this should do the trick

div > .glyphicon {
  display: block;
}