Unexplained, explained padding

[Aeonix]

https://jsfiddle.net/rw2894fe/2/

I don't need to explain the issue, it's visible the second you look at it.
Red anchors seem to have "unexplained" padding on bottom and right side.
Removing it with "padding: 0; margin: 0;" doesn't affect it.

Could someone tell me how to remove that unwanted padding and make it look nicely/even? (so that people with OCD won't freak out).

P.S.: Even more visible if you remove my padding from the game: https://jsfiddle.net/rw2894fe/4/
P.S. 2: Nevermind, the solution that I found (adding font-size: 0; to parent and font-size: X; to child) removes all padding, including manual. Back to version 4.

[gentlemedia]

In this case just float them, because you set fixed dimensions of 80px on them anyways so there's no need for using inline-block.

[Aeonix]

I have no idea why default float: left; would create a problem and float: right; wouldn't. Could you explain?

because you set fixed dimensions of 80px on them anyways so there's no need for using inline-block.

But only inline elements don't react with set height and width.

[gentlemedia]

I have no idea why default float: left; would create a problem and float: right; wouldn't. Could you explain?

What kind of problem do you mean?

But only inline elements don't react with set height and width.

Indeed! Inline elements ignore the width and height properties unless you change them to inline-block or you float them.

https://www.impressivewebs.com/difference-block-inline-css/

[Aeonix]

What kind of problem do you mean?

Well "float: left" is pseudo-default. But "float: right" suddenly solves marginal errors, why?

[gentlemedia]

Well "float: left" is pseudo-default. But "float: right" suddenly solves marginal errors, why?

Sorry, but I don't know whatt you mean with 'pseudo-default' and 'float right solves marginal errors'

[Aeonix]

I give up.

Problem is gone, let's have some beer.