Почему стилизация гамбургера тегом div отличается от button?

Question

[Genri_Rus]

Собственно вот пример

Это баг или фича браузера ? Стили применяются абсолютно одинаковые.

Какой стиль задается по-умолчанию в браузере и делает линию у кнопки по середине ?

Comments

[Ankhena]

Совсем не всё мы можем увидеть в инструментах разработчика.
Попробуйте почитать https://bugzilla.mozilla.org/show_bug.cgi?id=984869#c2 и далее, куда занесет.

p.s. надеюсь, вы не станете делать бургер дивом.

[Genri_Rus]

Ankhena, спасибо большое что ответили

p.s. надеюсь, вы не станете делать бургер дивом.

Конечно же не буду, вы мне раньше как-то подсказывали чтобы все делать осмысленно )

Вот я делал-делал, а теперь пришел к такому вопросу )))

Хотелось бы у вас спросить, а если в других браузерах span не будет по середине ?

[Ankhena]

Genri_Rus, вы всегда можете задать ему это положение в явном виде, например, флексами.
Вообще без спанов https://jsfiddle.net/Ankhena/fxv2tdL0/
Но только не забудьте добавить aria-label или доступно скрытый спан с текстом.

[Genri_Rus]

Ankhena, спасибо ;)

А вообще интересно как они span в кнопке сделали по середине )

Я зашел и посмотрел в internet explorer и там span также по середине, наверняка есть какой-то стиль задающий такой эффект )

[Ankhena]

Genri_Rus,

наверняка есть какой-то стиль задающий такой эффект )

но не в css

[Genri_Rus]

Ankhena, а вы конкретно знаете почему так ?

[Ankhena]

Genri_Rus, потому что есть особенные элементы, вспомните инпуты или еще круче селекты. Их вид не полностью зависит от css.
Я вам в первом посте дала ссылку, которая наводит на размышления и на путь куда гуглить дальше для детального изучения.

Answer 1

[Антон Шаманов]

потому что у элементов кроме твоих стилей есть еще и стандартные которые задаются браузером

Comments

[Genri_Rus]

Хорошо, тогда какие именно стили делают линию по середине ?

Потому как я не нашел там таких стилей

[Антон Шаманов]

Genri_Rus, https://yadi.sk/i/PQueNwy9D6vGiA

[Genri_Rus]

Антон Шаманов, это у кнопки.

А почему у дива такого нету ?

Вы просто писали, что браузер задает какой-то свой стиль по-умолчанию, я и спросил тогда как он сделал по середине тег span внутри button ?

[Антон Шаманов]

Genri_Rus, стили распространяются на вложенные элементы, сравни diffом свойства элементов и узнаешь в чем разница, скорее всего в box-sizing

[Genri_Rus]

Антон Шаманов, а вы не знаете точно почему так ?

[Антон Шаманов]

Genri_Rus,
скорее всего box-sizing, поставь div'y значение как у button
я если и занимаюсь версткой, то использую bootstrap чтобы свести к минимуму подобные проблемы

[Genri_Rus]

Антон Шаманов, добрый вечер, ничего не изменилось