Ответ 1
Я знаю, что это пара лет, но я добавлю свои мысли после некоторого исследования к проблеме при написании таблицы стилей сброса для проекта.
ПРИМЕЧАНИЕ ** Это основано на просмотре исходного кода Firefox, потому что его было проще всего получить и прочитать. Однако, на основе аналогичного поведения в других браузерах реализация, вероятно, похожа.
Во-первых, основная проблема заключается в том, что элементы <button> - по крайней мере, в Firefox - создаются с внутренним элементом между тегом <button> и его дочерними элементами. В Firefox он называется moz-button-content и не является чем-то, что может быть достигнуто с помощью CSS и было настроено для отображения блока без наследования высоты кнопки, вы можете увидеть это объявление стиля в таблице стилей useragent:
Из "source/layout/style/res/forms.css"
*|*::-moz-button-content {
display: block;
/* Please keep the Multicol/Flex/Grid/Align sections below in sync with
::-moz-scrolled-content in ua.css and ::-moz-fieldset-content above. */
/* Multicol container */
-moz-column-count: inherit;
-moz-column-width: inherit;
-moz-column-gap: inherit;
-moz-column-rule: inherit;
-moz-column-fill: inherit;
/* Flex container */
flex-direction: inherit;
flex-wrap: inherit;
/* -webkit-box container (aliased from -webkit versions to -moz versions) */
-moz-box-orient: inherit;
-moz-box-direction: inherit;
-moz-box-pack: inherit;
-moz-box-align: inherit;
/* Grid container */
grid-auto-columns: inherit;
grid-auto-rows: inherit;
grid-auto-flow: inherit;
grid-column-gap: inherit;
grid-row-gap: inherit;
grid-template-areas: inherit;
grid-template-columns: inherit;
grid-template-rows: inherit;
/* CSS Align */
align-content: inherit;
align-items: inherit;
justify-content: inherit;
justify-items: inherit;
}
Поскольку вы не можете повлиять ни на один из стилей этого элемента, вы вынуждены добавить свой стиль в теги <button>. Это приводит ко второй проблеме: браузер жестко запрограммирован для вертикального позиционирования содержимого кнопки.
Из "источника/макета/формы/nsHTMLButtonControlFrame.cpp"
// Center child in the block-direction in the button
// (technically, inside of the button focus-padding area)
nscoord extraSpace =
buttonContentBox.BSize(wm) - contentsDesiredSize.BSize(wm);
childPos.B(wm) = std::max(0, extraSpace / 2);
// Adjust childPos.B() to be in terms of the button frame-rect:
childPos.B(wm) += clbp.BStart(wm);
nsSize containerSize = (buttonContentBox + clbp.Size(wm)).GetPhysicalSize(wm);
// Place the child
FinishReflowChild(aFirstKid, aPresContext, contentsDesiredSize,
&contentsReflowInput, wm, childPos, containerSize,
ReflowChildFlags::Default);
Учитывая эти две проблемы, вы можете начать видеть, как кнопка заставляет контент центрироваться, рассмотрим:
<button> tag
+------------------------+ ^
| button extra space | |
| | |
+------------------------+ |
|| ::moz-button-content || | button height
|| display: block; || |
+------------------------+ |
| | |
| button extra space | |
+------------------------+ v
Если вы зададите button высоту - как 48px от вашей скрипки, текст будет центрирован, потому что элемент moz-button-content является блоком отображения и будет иметь только высоту содержимого (скорее всего, строку -высота содержимого по умолчанию), и если поместить рядом с другим элементом, вы получите следующее поведение:
* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
font-family: san-serif;
background: none;
font-size: 1em;
line-height:1;
vertical-align: baseline;
}
button, a {
height: 3em;
}
button {
background: red;
}
a {
display:inline-block;
background: green;
}<button>Button content</button>
<a>Link Content</a>