How to remove the extra top padding of anchor tags inside a li element in Firefox?

Firefox seems to add an extra top-padding for all the anchor tags inside li elements. If you are facing the same issue in your website and want to know how to remove the extra top padding for anchor tags inside a li element in Firefox then read on to know the solution.

I had created a menu using ul,li tags. However I realized that Firefox was adding padding-top to the anchor tag inside li elements.

The root cause of the issue is that Firefox sets the default style of the anchor tag inside a li element to display:inline. We are not allowed to set the width height, top and bottom margins or paddings for the anchor tag. That means we should find a way to bypass this limitation.

The only way to fix the issue is to set the anchor tag inside a li element to float:left. That way we will be able to set the paddings and margins.

To fix this issue we need to set the anchor tag inside a li element to float : left. So that we can set the paddings and margins.

Here is how I modified the CSS to fix the issue.

li a { float: left; }
#menu-id ul li a {
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #5E5E5E;
}

Hope this solves your problem too. If you have any feedback get in touch with us using the comment form below.