Почему кнопка ниже другой?

247
26 ноября 2016, 19:45

Я хочу написать CSS, который будет делать и button и a кнопками, похожими на material-дизайн. Написал стили, но если применить стили к элементу a, то он становится ниже button на один пиксель. Почему?

.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>

Answer 1

  1. Ещё верхний и нижний паддинг обнулите.

  2. Для файерфокса рекомендуют обнулить паддинг и границу через ::-moz-focus-inner. В трюках советуют добавить !important и заключить инструкцию в @-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>

READ ALSO
Нужно распарсить таблицу с html на C#
HTML

Нужно распарсить таблицу с html на C#

Вот есть такой html:

 255
Как вытащить инфу из html тегов по id?
HTML

Как вытащить инфу из html тегов по id?

Есть скрипт получающий запрос (через input())Далее запрос складывается с заранее заданным url, и в переменную присваивается html код получившейся...

 280
Проблема с плеером на JavaScript
HTML

Проблема с плеером на JavaScript

Есть самопальный плеер на JavaScript, если я добавляю второй элемент <audio>, то он работает лишь с первым источником, игнорируя другой, то есть...

 250
flexbox grid system
HTML

flexbox grid system

Не могу понять почему мои боксы стали такие маленькие (были квардратные)lg в md в xs вставил но всё же криво всё стало

 232