Where did the incomprehensible indentation come from after adding display: inline-block;?

Question

css

Where did the incomprehensible indentation come from after adding display: inline-block; #home a ? codepen.io/anon/pen/PPpGOd
I understand that the link is initially an inline element and accepts only a width, but no height, and that after adding display: inline-block; she begins to perceive height. But where is the retreat?

Answer 1

Because the margin-bottom of your heading without display:inline-block for a link is not measured from the edge of the yellow fill, but from the edge of the text of that link (because the element is inline). And with inline-block, the rendering is already done from the edge of your fill, because the element has become a block element.
Elementary checked by the inspector:
with inline-block:
Without inline-block: