CSS box model - перекрытие элементов и неожиданные отспуты

у span'ов display inline. добавь второму спану margin-left -4px или используй float. div не растягивается по той же причине.

замени спаны на ul > li, сделай им display block и float left. после ul вставь <div style="clear: both"></div>

Эм, а inline же просто отменяет перенос строки после каждого блока, позволяя им следовать друг за другом. Причем тут отступы? Или перенос строки заменяется на пробел?

разве у span'ов есть стиль по умолчанию ? http://www.w3.org/TR/html-markup/span.html

А вот у div есть, но ввыставлен в block http://www.w3.org/TR/html-markup/div.html

margin-left -4px

мне важен не сам факт как это сделать, а узнать почему происходит не так как ожидалось.

мне важен не сам факт как это сделать, а узнать почему происходит не так как ожидалось.

Перенос на новую строку автоматически добавляет отступ. Анон выше же написал.

Сделал как вы предложили http://jsfiddle.net/fx5t4/4/ получается как то странно.

Если указан float: left; то отступов нету, но список вылазит из div. Если не указан, список вложен в div но есть отступы.

Чет совсем непонимаю.

Эм, а inline же просто отменяет перенос строки после каждого блока, позволяя им следовать друг за другом. Причем тут отступы?

При том, что тебе пора прочитать спецификацию. Also, прочитай про display: inline-block, наверное ты его хочешь.

Ты говорил в первом абзаце про inline-block, но никак не про inline.

span - это inline, насколько я знаю...

Был прикольный баг, когда после изображений в ie7 был отступить на 1px, лечились только br после. Я к тому, что кроме прочего подвергай все сомнению. Правда тут просто непонимание, rtfm.

Порадовали блин :) откудаж мне было знать что он имел в виду.

Неправильно изъснился. block - друг под другом, inline - в строчку.

Перенос на новую строку автоматически добавляет отступ

ахренеть, форматирование кода меняет поведения кода.

А что на счет div и того что вложенные блоки (из за свойств margin, border) вылезают за границы div?

Это тоже такое странное поведение, которое устраняется хаками?

Нет, ты всё-таки прочитай про inline-block.

А перенос строк, как и пробел, это whitespace и он значимый для inline, иначе бы ты в своих параграфах здесь никаких пробелов бы не видел. Подумай, зачем между словами нужны пробелы :)

1. Почему между границами двух span'ов есть пространство? Хотя указан margin: 0 на обоих.

http://www.broken-links.com/2013/03/25/removing-the-whitespace-from-inline-bl...
http://css-tricks.com/fighting-the-space-between-inline-block-elements/

2. Почему div не растянулся в сооветсвии с размерами вложеных span'ов? Ему ни padding ни border ни почем.

Потому, что вертикальные отступы в строчных элементах не влияют на положение других.
http://www.w3.org/TR/CSS21/box.html#margin-properties
http://www.maxdesign.com.au/articles/inline/

У него там inline, а не inline-block.

у span'ов display inline. добавь второму спану margin-left -4px

С чего ты взял что инлайновые элементы отреагируют на маргин, причем еще и отрицательный?

http://jsfiddle.net/fx5t4/7/

1. Почему между границами двух span'ов есть пространство? Хотя указан margin: 0 на обоих.

На инлайны маргин не действует. Чтобы не учитывались инлайновые пробелы между элементов, эти элементы нужно сделать блочными, или писюкать псевдо-элементы :after :before. Кстати инлайн-блок тоже не поможет т.к. он почти инлайновый и учитывает инлайновые пробелы.

2. Почему div не растянулся в сооветсвии с размерами вложеных span'ов?

Потому, что по умолчанию для всех элементов которые position: static; (это дефолт) ширина по умолчанию равна 100%

У него там inline, а не inline-block.

И что это меняет? Был вопрос на тему пробелов.

Почему между границами двух span'ов есть пространство?

С чего ты взял что инлайновые элементы отреагируют на маргин

На горизонтальный отреагируют.

Потому, что по умолчанию для всех элементов которые position: static; (это дефолт) ширина по умолчанию равна 100%

Он про высоту спрашивал.

Забей на флоуты. Ставь контейнеру font-size: 0, а спанам — нужный размер шрифта.

спасибо, после прочтения, особенно последней ссылки, все встало на свои места.

С чего ты взял что инлайновые элементы отреагируют на маргин, причем еще и отрицательный?

Видимо с того что работает? Попробуй сам.

http://jsfiddle.net/5cDBs/4/ (правда здесь немного не получилось, но span все равно сдвинулся)

Видимо с того что работает? Попробуй сам.

Ок, работает, но что это тебе даст, если неизвестно какой длины пробел в конкретном шрифте?

в конкретном шрифте

для конкретного фонт-сайза, с конкретным леттер-спейсинг

он всегда 4px или 0.25em

всегда

http://jsfiddle.net/5cDBs/5/

Что это вообще? :) Если хочешь убрать отступы между inline и inline-block элементами, то всегда можно использовать 4px или 0.25em. Эта величина не зависит от размера шрифта. Речь шла про отступы.

Речь шла про отступы

А отступ между инлайновыми элементами - и есть пробелы инкапсулированные в один (пробел). В примере я показал что ширина пробела зависит от величины шрифта как минимум.

http://jsfiddle.net/5cDBs/7/ раскомментируй там свой маргин - спан не примкнет к слева стоящему даже по em'ам, а уж про 4px и говорить нечего.

http://jsfiddle.net/7s7sp/1/

Я просто переставил font-size к родителю: http://jsfiddle.net/7s7sp/2/

Ну и т.к. усе любят занулять и дефолтить стили (а-ля: * {/*что-то там*/}), то лучше не полагаться на размер установленного (где-то-хз-там) размера шрифта.

* {/*что-то там*/}

Это вообще неправильно. Есть специальные reset.css (2 версии) и normalize.css.

Я просто переставил font-size к родителю: http://jsfiddle.net/7s7sp/2/

Можно сделать font-size: 1em у потомка :) Если честно первый раз сталкиваюсь с тем, что пространство между inline и inline-block элементами не убирается отрицательным отступом. В реальных проектах обычно все само нормально работает. Хотя если верстал не я, то может и не работать и reset может быть кривой.

А вообще с работой у тя как? Если у меня верстка будет в задаче, могу к тебе обращаться?

Да пока хватает работы, ближайшие пару месяцев точно.

Да я пока и не предлагаю ничего ))

А, вот ещё костыль.

<p><!--
    --><span>aaa</span><!--
    --><span>bbb</span>
</p>