Setting line-height: 1; on the parent block element removed the space.
There was a small side-effect. The background of inner inline element overlapped the border of outer block element.
Applying top & bottom padding on the outer block element fixed this.
Your main mistake is thinking that the background and/or vertical alignment of the inline element will have any effect of the block level parent that surrounds it. Backgrounds on inline elements cover the “content area” of an inline element (which is not the same as the content area of a block box) and does not equate to the full space that the inline element takes up. Also vertical padding on inline elements will increase the height of the inline element but have no effect to the surrounding area except maybe to bleed over other lines and vertical margins are completely ignored.
It is possible in a lot of cases to achieve the effect you want by controlling line-height and font-size (and padding on parents if borders are used on the parent) to control specific instances to produce the effect you want but that effect may be lost should a user resize the text or should you use an odd pixel size.
Suffice to say that backgrounds on inline elements are only useful for highlighting odd words in a sentence and not for creating block level button effects where height is critical.
If you want perfect control then make the inline element a block element or float it.
Backgrounds on inline elements cover the “content area” of an inline element (which is not the same as the content area of a block box) and does not equate to the full space that the inline element takes up.