When i put my inline-block element (14x14px) in single-line row (height and line-height = 20px), it takes place not in the middle of it's parent (vertical). [Line-height problem picture](http://i.stack.imgur.com/tWEah.png "Screenshot")

Here's a [Сodepen example](http://codepen.io/anon/pen/ZWevLm)

**HTML**

```
<div class="status status_success"> Success</div>
<div class="status status_busy"> Busy</div>
<div class="status status_missed"> Missed</div>

```

**CSS**

```
body {
  font-size: 16px;
  line-height: 20px;
}

.status {
  position: relative;
  display: block;
  white-space: nowrap;
  border: 1px solid #000; // block border for helping test
  margin: 0 0 20px;

  &:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    background-color: #d6d6d6;
    border-radius: 50%;
  }
}

```

Tell me, please, why is it happening?