Is there a way to remove unwanted whitespace before </a> which is on a separate line?

Viewed 55

Is it possible to avoid the extra space at the end of the link in this example, and still maintain </a> directly below <a ...> in the code?

<p>
    <a href="#">
        Peter Griffin
    </a>,
    cartoon character.
</p>

That simple example might of course be written as:

<p>
    <a href="#">Peter Griffin</a>, cartoon character.
</p>

... and still be pretty readable. But as you can see in my next example the code can be more complex, with a lot of intertwined server side logic in it (razor, in my case). Then it is important (to me) that the closing tag always is directly below the opening tag, on a separate line.

A more complex example:

<a asp-controller="Users" asp-action="Details" asp-route-id="@Model.ProjectOwner.Id">
    @Html.DisplayFor(model => model.ProjectOwner.FullName)
</a>,
<span class="text-muted small">
    <span class="fas @Model.ProjectOwner.UserRoles.FirstOrDefault().Role.Icon fa-fw"></span>
    @Model.ProjectOwner.UserRoles.FirstOrDefault().Role.DisplayName
</span>

To remove the extra space here, I would have to move the closing anchor tag to the end of line two, like this:

<a asp-controller="Users" asp-action="Details" asp-route-id="@Model.ProjectOwner.Id">
    @Html.DisplayFor(model => model.ProjectOwner.FullName)</a>,
<span class="text-muted small">
    <span class="fas @Model.ProjectOwner.UserRoles.FirstOrDefault().Role.Icon fa-fw"></span>
    @Model.ProjectOwner.UserRoles.FirstOrDefault().Role.DisplayName
</span>

That doesn't look good...

1 Answers

I found a really simple CSS solution:

a {
    display: inline-block;
}

No more extra space at the end of links!

Related