I want to write a CSS that will make both a button and a buttons similar to material-design. I wrote styles, but if you apply styles to the a element, it becomes below the button one pixel. Why?

 .material-button { display: inline-block; background-color: #507299; border: none; border-radius: 2px; padding-left: 16px; padding-right: 16px; height: 36px; line-height: 36px; white-space: nowrap; font-family: RobotoMedium; font-size: 14px; /*text-align: center;*/ text-transform: uppercase; color: #ffffff; } .material-button:hover, .material-button:visited, .material-button:link, .material-button:active { color: #ffffff; text-decoration: none; } 
 <a role="button" class="material-button" > Запись </a> <button type="button" class="material-button" > Копировать </button>

  • add vertical-align: top; - soledar10

1 answer 1

  1. Even the top and bottom padding zero.

  2. For firefox, it is recommended to reset the padding and the border through ::-moz-focus-inner . In tricks, it is advised to add !important and enclose instructions in the @-moz-document url-prefix(http://) { } .

 /* 2. */ .material-button::-moz-focus-inner { border: 0; padding: 0 16px; } .material-button { display: inline-block; background-color: #507299; border: none; border-radius: 2px; /* 1. */ padding: 0 16px; height: 36px; line-height: 36px; white-space: nowrap; font-family: RobotoMedium; font-size: 14px; /*text-align: center;*/ text-transform: uppercase; color: #ffffff; } .material-button:hover, .material-button:visited, .material-button:link, .material-button:active { color: #ffffff; text-decoration: none; } 
 <a role="button" class="material-button" > Запись </a> <button type="button" class="material-button" > Копировать </button>

  • Thank you, this is a solution to the problem =) - Ilya Bizunov
  • @ IllyaBizunov, mark the answer as correct - ArchDemon
  • @ArchDemon so I noted, as soon as it became possible. It can not be some time after the publication of the issue to take. - Ilya Bizunov
  • @IlyaBizunov, that in your question, that in this answer the Record button is below the Copy button. FF 47 - Visman
  • @Visman, very strange. Opened a question in FF - also 1 pixel lower. I opened the same buttons in my project - everything is fine. Why this happens - I have no idea - Ilya Bizunov