span height inside link is truncated
<p>I'm trying to add some background image inside span elements with some vertical offset (<code>background-position-y: 2px;</code>)</p>

<p>But, even if the link element is <code>50px</code> height, the <code>img</code> in span element is vertically truncated.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>a {
  display: inline-block;
  height: 50px;
  padding-left: 5px;
}
a span {
  background-repeat: no-repeat;
  background-color: #ffffff;
  background-position-y: 2px;
  display: inline-block;
  width: 4px;
  height: 13px;
}
a .open {
  background-image: url('http://img11.hostingpics.net/thumbs/mini_161877bracketleft.gif');
}
a .close {
  background-image: url('http://img11.hostingpics.net/thumbs/mini_762032bracketright.gif');
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
  some text &lt;a href="#"&gt;&lt;span class="open"&gt;&lt;/span&gt;some link&lt;span class="close"&gt;&lt;/span&gt;&lt;/a&gt;
&lt;/p&gt;</code></pre>
</div>
</div>
</p>

<p>Thanks for any help.</p>