Загадочный отступ, попробуй объясни

[Svatov]

Столкнулся с поведением элементов, которое очень трудно объяснить мне в определениях действующей логики. Пример ситуации указан ниже. Проблема в загадочном отступе который появляется при задании основному блоку .main padding отличный от нуля. Происходит непонятное схлопывание, которое вылазит за рамки моего сознания) Где зарыта корова, я не знаю...с группой единомышленников локализовали проблему вокруг <fieldset> . Тестировал в Chrome. Помогите разобраться

http://jsfiddle.net/49EYP/7/

Edited August 9, 2012 by Svatov

[SelenIT]

Отступ имеется в виду снизу, под кнопкой (в Хроме есть, в FF нет)? Методом тыка замечено, что он исчезает, если убрать float у .btn. Логику пока сам не постиг, сильно смахивает на баг...

[Viper]

ну нижний отступ делает этот элемент:

#register .text {
   margin-bottom: 12px;
}

из-за float'а у этого:

.btn {
   float: left;
}

Решение:

1.

fieldset {
   overflow: hidden;
}

2. убрать float у .btn или заменить на display: inline-block

3. к .text тоже добавить float и, например, width: 100%

4. заменить margin-bottom на padding-bottom

Думаю из вариантов решения понятно как возникает этот отступ(баг иль не баг...), копать в сторону - float + margin

П.С. Когда-то встречал статьи на тему этого "загадочного" отступа(и он имел, на сколько я помню, какое-то "научное" название ), но не помню уже... Уже привык к ним)

Edited August 9, 2012 by Viper

[Softlink]

Viper, решение через overflow было придумано через 10 минут после первоначального озвучивания проблемы. Суть в том, почему это происходит.

[SelenIT]

Мда, Хром всё больше и больше напоминает старые IE...

Разумных объяснений происходящему по-прежнему не вижу.

[lexxcode]

та вот и мы минут 40 крутили этот пример и обсуждали в чате, непонятно откуда этот отступ берется. Если прописать fieldset в css overflow:auto; то он начинает себя вести почти как положено вроде, так как если бы это был просто div.

[Svatov]

Так может им написать в багрепорт?...

[mrnobody]

Блин, не пойму, где появляется отступ при задании padding'а элементу main . Поставил .main {padding: 20px;}, в Хроме и Мозилле все одинаково выглядит.

Скрин:

[Svatov]

У тебя <fieldset> не обнулен. Убери бордер у него и увидишь магию Chroma

Edited August 9, 2012 by Svatov

[MiksIr]

Так может им написать в багрепорт?...

Конечно, почему бы и нет. Только для начала бы неплохо взять хром с бета-канала и проверить там.

[wwt]

больше похоже на баг.

Viper верно написал, при float у btn почему-то плюсует padding-bottom у main с margin-bottom у text.

Edited August 10, 2012 by wwt