Menu
I am having trouble with unwanted extra height added to the anchor tag.
This is the basic code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<a style="display: inline-block; padding:0; margin:0;">
<span style="display:inline-block; width:25px; height:25px; background-color: red; padding:0; margin:0;"></span>
</a>
</body>
</html>
and you can test here - http://jsbin.com/cewuza/2/edit
SO how do I remove the unwanted height ? As you can see I have tried modifying the display from inline to inline-block already.
970
The following demonstrates what the problem actually is:
<a style="display: inline-block; outline: solid blue;">
<span style="display:inline-block; width:25px; height:25px; background-color: red;"></span>
</a>The span element sits on the text baseline, since an inline block behaves like a big (or maybe small) text character. There is some space below the baseline, for descenders of letters like j, g, and q.
To fix this, make the inline block aligned to the bottom of its parent element, using the vertical-align property:
<a style="display: inline-block; outline: solid blue;">
<span style="vertical-align: bottom; display:inline-block; width:25px; height:25px; background-color: red;"></span>
</a>try font-size: 0; on the anchor
edit: didn't see the question comments..
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
