Read more

When I give a button and a link the same styles, why is the link one pixel higher?

Henning Koch
May 10, 2012Software engineer at makandra GmbH

It's not logical, so don't be too hard on yourself. You need to give it a height and change the box-sizing and display:

button
input[type="reset"],
input[type="button"],
input[type="submit"],
input[type="file"] > input[type="button"]
  display: inline-block
  box-sizing: border-box
  height: 20px
  line-height: 20px
Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

Also see Proper cross-browser CSS styling for buttons.

Posted by Henning Koch to makandra dev (2012-05-10 13:25)