Как я понимаю, свойства width/padding/margin работают только на элементах уровня блока. Однако в элементах INPUT и SELECT я могу указать ширину, которая работает. Должно ли это?Элементы INPUT и SELECT нестандартного размера
я мог бы написать что-то вроде этого:
<input type="text" style="display:block;" />
Но нужно ли это?
Может кто-нибудь объяснить, пожалуйста, почему это работает?
Фактически, они не являются действительно встроенными элементами, а скорее элементами встроенного блока. Это позволяет указывать ширину, высоту и другие свойства, специфичные для блока, без необходимости разбивать поток встроенных элементов. In good browsers вы можете использовать «display: inline-block» для любого элемента для достижения того же.
Вы что, что случилось, если бы это было невозможно? Когда был введен элемент INPUT, CSS не был. И ширина элемента INPUT абсолютно необходима в HTML для создания правильных форм.
Элементы формы - это черная овца мира HTML/CSS - есть много свойств, которые не работают, как обычные элементы HTML.
Хотя это не отвечает Йор вопрос, вы можете найти интересную следующее обсуждение: http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/
Технически, это делает свойство, которое зависит от браузера. На данный момент большинство браузеров позволяют вам устанавливать ширину, но она не гарантируется (особенно в старых браузерах), и вы определенно можете использовать с ошибками.
Спецификация W3 для входного элемента технически делает его встроенным элементом. Inline-блок даже не является частью спецификации W3, это часть CSS2 (следовательно, старые браузеры несовместимы).
У IE есть некоторые смешные ошибки, если вы указываете ширину в процентах и помещаете в нее много текста.
Короче говоря, это почти всегда безопасно, просто не является частью какой-либо официальной спецификации, которую я видел.
Применяется: ко всем элементам, но не инлайн элементов, строк таблицы и групп строк
управления формы, такие как вход и выберите элементы заменены инлайн элементы (элемент заменяется элементом управления формой - текстовое содержимое не отображается как обычный элемент).
Поскольку они заменены, они не заменяются, поэтому применяется свойство width.
Хотя это не обширный тест, по крайней мере, в Firefox 3, вычисленный стиль входного элемента (без авторского стиля для его изменения) отображается: inline - not inline-block. – Quentin
@ Давид, да, вы правы, хотя я предполагаю (я не мог найти никаких доказательств), что Mozilla использует «display: -moz-inline-box» внутри. Я тоже сделал некоторые тесты, и кажется, что IE8 и Chrome2 сообщают «встроенный блок» для элементов SELECT, в то время как Opera9 сообщает «inline». При этом я считаю, что ваш ответ правильный, но довольно безопасно предположить «отображение: встроенный блок» для таких элементов. –