CODEWITHSUNDEEP
htmlcss
skyisred
skyisred

Reputation: 7105

<button> and <a> seem have different line-heights, how to go around it?

The button is 2px bigger then the a tag with same styles. Any ideas why is it doing it and how to fix it?

jsfiddle

<a href="">Some Text</a>
<button> Some Text</button>

a, button {
  background-color: red;
  border: none;
  text-decoration: none;
  font-size: 14px;
  line-height: 14px;
  font-family: Verdana;
  display: inline-block;
  color:black;
  padding:0;
}

Upvotes: 0

Views: 54

Answers (1)

Alex Ackerman
Alex Ackerman

Reputation: 1341

The button has padding. Set padding : 0; on the button and they will look the same

Firefox has its own thing... Try adding the following:

button::-moz-focus-inner { 
    border: 0;
    padding: 0;
}

Upvotes: 3

Related Questions