Unknown offset. (inline-flex element + clearfix)

Question

Unknown offset. In latest Chrome, FF, IE

Explain please, what the top offset (1em) ?

JSFiddle

#a {
  border:1px solid blue;
}


#b {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex; /* inline-table too */
  border:1px solid red;
  width:50px;
  height:50px;
}


#b:after { /* bootstrap clearfix */
  display:table;
  content:'';
}

<div id="a"><div id="b"></div></div>

Similar question: Why inline-flex element with clearfix has a weird white space?