Не могу заставить <button> действовать как inline

[7ion]

Есть span. Если спану задать padding, он вывалится за поля родителя.

Если button задать padding, display: inline; border: 0, то за поля родителя кнопка все равно вылезать не хочет.

Почему?

Демо - https://jsfiddle.net/hmev9p1r/

[SelenIT]

button — некая «вещь в себе», которая заключена в «волшебный» контейнер с display:inline-block, и плювать хотела на явно заданные стили, к сожалению:(. Очень многих лет уговоров стоило убедить разрабов браузеров (прежде всего Мозиллы), что такое поведение — не фича, а вообще-то баг, и что display кнопки должен слушаться заданных стилей (в частности, кнопка должна уметь становиться флекс- и грид-контейнером), но display:inline для кнопки — последний рубеж, который пока никак не поддается. Единственный известный мне обходной путь — задать кнопке display:contents и работать со вложенным в нее span-ом — работает пока только в Хроме с включенным экспериментальным флагом (возможно, в Сафари ТП теперь тоже). В качестве обходного варианта можно задать для кнопки <label>, а саму кнопку скрыть (как при кастомизации чекбоксов/радио).

[Hasiev]

deleted

Edited December 25, 2017 by Hasiev
Удалил

[Switch74]

потому что display:inline-block; нужно для того, чтобы вертикальные padding и margin работали так, как вам нужно
а то что у button они отрабатывают даже с inline, посмотрите в инструменте разработчика что браузер поумолчанию фигачит на кнопку и если вы тоже самое поставите для span то он будет вести себя так же как button (что именно отвечает за подобное поведение я не вникал, да и не суть на мой взгляд)

[7ion]

6 часов назад, Switch74 сказал:

потому что display:inline-block; нужно для того, чтобы вертикальные padding и margin работали так, как вам нужно

То, как мне нужно - чтобы button работал как span, а не наоборот 

6 часов назад, Switch74 сказал:

посмотрите в инструменте разработчика что браузер поумолчанию фигачит на кнопку и если вы тоже самое поставите для span то он будет вести себя так же как button

В этом и суть. -webkit-appearance: button превращает span в неявный inline-block, но если применить -webkit-appearance: none к button, не произойдет ничего!

45 минут назад, SelenIT сказал:

button — некая «вещь в себе», которая заключена в «волшебный» контейнер с display:inline-block, и плювать хотела на явно заданные стили, к сожалению:(.

Это просто шикарно. Удивительная история: button по новым стандартам разработчик обязан использовать для активации любой интерактивности, а стилизовать button нельзя. Классно, супер.

[SelenIT]

Мир несовершенен:(. Но, справедливости ради, чем дальше, тем таких несуразных ограничений меньше.

[AlexZaw]

Стилизовать то ее можно, кто мешает, да вы и сами в примере это делаете, а то что она раздвигает родителя, то даже не представляю в каком случае это может представить проблему