<a> indentation produces whitespace

Question

I'm trying to display two links. But when I use the correct indentation the second link renders whitespace in front of the icon. Why does this happen? And is there a way to prevent it without using hardly readable code?

Creates whitespace:

<a href="...">
    <i class="fa fa-pencil-square-o fa-lg"/>
</a>
<a href="...">
    <i class="fa fa-trash fa-lg"/>
</a>

不创建空格：

<a href="...">
    <i class="fa fa-pencil-square-o fa-lg"/>
</a>
<a href="..."><i class="fa fa-trash fa-lg"/></a>