CODEWITHSUNDEEP
htmlcsspadding
rafaelmorais
rafaelmorais

Reputation: 1383

Getting more padding than supposed

I was coding a menu when I noticed that the paddings I gave weren't right.

enter image description here

As you can see, its not even center aligned. I've tried box-sizing but nothing...

This is the code I have:

<!-- html -->
<a href="#">LinkedIn</a>


<!-- css -->
a:link, a:visited{
   text-decoration: none;
   text-transform: uppercase;
   padding: 6px 20px;
   font-size: 14px;
   line-height: 14px;
   box-sizing: border-box;
}

I'm also using a reset.css, this one.

DEMO

Upvotes: 0

Views: 42

Answers (1)

jmore009
jmore009

Reputation: 12923

I'm going to post two images here. The first one is your image from codepen as is

enter image description here

I took this screenshot into photoshop and measured out the sides so you can see. The boxes on the top are exactly the same height (one was copied form the other) and the boxes on the sides are exactly the same width. So as you can see this isn't a padding issue. Padding is working just as expected. But something does still look off as you mentioned

Here is the second image:

enter image description here

In this image I changed your font to plain "Arial" and again measured the boxes so you can see. Their exactly the same and line up perfectly. The issue here has nothing to do with your CSS but rather how the font-family is being rendered. I have encountered this issue myself with certain fonts. You can possibly play with line-height some more or you can always overcompensate the padding on the bottom to make up for the difference. Ex: padding: 6px 20px 7px 20px;

Upvotes: 3

Related Questions