Ситуация с Input

[Svatov]

http://jsfiddle.net/rrPzy/3/

Посмотрите пожалуйста такую вот ситуацию.

Не могу объяснить для себя, почему строковый элемент input в этой ситуации переводится на новую строку.

Edited October 8, 2011 by Svatov

[DrStrangeLove]

Потому что у спана выставлен

display:block;

и он занимает всю строку.

У спана только у контент-бокса ширина 100px, а в целом он занимает всю строку.. судя по Google Developer Tools..

Edited October 8, 2011 by DrStrangeLove

[Svatov]

Но ведь задана ширина этому спану

[DrStrangeLove]

Но ведь задана ширина этому спану

Смотри добавленное.

[Svatov]

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

[DrStrangeLove]

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

так будет, если ты выведешь элемент из нормального потока (через float или position)

ширина элемента = ширина контент-бокса + левый и правый паддинги+ левый и правый бордер+левый и правый маржин.

Когда ты задаёшь width - ты задаёшь только ширину контент-бокса.

Однако если у тебя нормальный поток, то всё равно блочный элемент займёт всю строку: http://jsfiddle.net/UxYrd/1/

Edited October 8, 2011 by DrStrangeLove

[Svatov]

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

Ширина то я знаю с чего складывается, но по умолчанию отступы поля и границы отсутствуют или сброшены обнулениями.

[DrStrangeLove]

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

Ширина то я знаю с чего складывается, но по умолчанию отступы поля и границы отсутствуют или сброшены обнулениями.

В нормальном потоке по дефолту элементы ведут себя так:

их расположения, когда в коде они рядом друг с другом:

блочный блочный -- один под другим

строчный блочный -- блочный под строчным

блочный строчный -- строчный под блочным

строчный строчный -- рядом друг с другом

В нормальном потоке блочный элемент никогда ни с кем не соседствует на одной строке - ни в начале строки, ни в конце.

пример - http://jsfiddle.net/FtaxY/2/

Edited October 8, 2011 by DrStrangeLove

[Svatov]

Все понятно Спасибо. Если об этом есть что-то в спецификациях то не отказался бы от ссылочки, смотрел не нашел ...но это так для укрепления...не так важно)

спасибо, что суть разъяснили

[DrStrangeLove]

Все понятно Спасибо. Если об этом есть что-то в спецификациях то не отказался бы от ссылочки, смотрел не нашел ...но это так для укрепления...не так важно)

спасибо, что суть разъяснили

Спецификации:

HTML:

по-русски

в оригинале

CSS:

по-русски

в оригинале

[Svatov]

Оо и по схлопыванию...то что надо) Благодарю)

[SelenIT]

Блочный элемент в потоке всегда ведет себя так, словно у него только блочные соседи. Если его соседи строчные, браузер оборачивает их в т.н. анонимные блочные боксы. Анонимные боксы фиг стилизуешь, поэтому и рекомендуют на одном уровне иерархии держать только однотипные (либо одни блочные, либо одни строчные) элементы.

Ширина то я знаю с чего складывается, но по умолчанию отступы поля и границы отсутствуют или сброшены обнулениями.

Нет, свободный margin (обычно — когда текст слева направо — правый) по умолчанию "auto", что для него значит "отсюда и до правого края контейнера".

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

Это в строчном контексте так (напр. для inline-block'ов и inline-table).