Jump to content
  • 1

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


7ion
 Share

Question

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

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

Почему?

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

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 1

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0
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 нельзя. Классно, супер.

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • Например, добавить  .wrapper li {     clear: both; } http://jsfiddle.net/e3f9ozLr/
    • Ты в стрелочной функции из-за того что у тебя одно выражение опустил { }. А это ведет к неявному возврату результата выражения.
    • Здравстуйте, каким образом можно получить доступ к Mathcad Application Server для получения доступа к документам и функциям Mathcad через Интернет. Может быть, есть другой способ связать интернет с Mathcad ?
    • Прошу помочь с заданием: Написать файл скрипта, который генерирует три числа, соответствующие значениям высоты, длины и ширины комнаты. Отобразить в консоли: a.Площадь стен комнаты b.Объём комнаты c.*Объём комнаты за вычетом случайно сгенерированного количества чисел, которые определяет объёмы случайно зашедших в комнату людей. (в итоге запустит скрипт последством консоли) (заранее огромное спасибо)
    • Попробуйте поиграться в этом направлении: Но то что касается применения фильтров с изменением визуального отображения конечного изображения — то повторить его 1:1, скорей всего, не выйдет. Для этого используются изображения с применённым фильтром отдельным файлом
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy