проблема с margin

[Odrin]

вот простой пример - http://jsfiddle.net/keut3/

Почему так выходит? Ведь у вложенного дива (.panel) отступы должны браться относительно родителя (.phone)? А выходит, как будто margin задан body.

Как исправить?

Наверно, это как- то связанно с Margin Collapsing? Никогда его смысла не понимал...

Edited March 1, 2012 by Odrin

[psywalker]

http://jsfiddle.net/keut3/1/

[DImas95]

Добавтье position: absolute; для .panel тогда будет так, как и предполагалось.

[Odrin]

  On 3/1/2012 at 2:18 PM, psywalker said:

http://jsfiddle.net/keut3/1/

padding не катит, как видите. Нужно, что бы серый div отступал от родителя.

  On 3/1/2012 at 2:22 PM, DImas95 said:

Добавтье position: absolute; для .panel тогда будет так, как и предполагалось.

Считаю absolute плохим тоном. Использовать его надо только тогда, когда без него не обойтись. Для отступов существует margin. Только с какого он тут не работает и как надо сделать, чтоб работал?

Edited March 2, 2012 by Odrin

[sigma77]

Odrin,

http://jsfiddle.net/keut3/3/

[Odrin]

  On 3/2/2012 at 7:08 AM, sigma77 said:

Odrin,

http://jsfiddle.net/keut3/3/

Еще хуже =)

В общем сам разобрался =)

http://jsfiddle.net/keut3/4/

Помогла эта статья. Может кому еще пригодится.

Если в двух словах - как я и подумал, это "Margin Collapsing".

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

И решение:

"Внешнему элементу поставить border, например border:1px solid black;

Можно добавить padding, например padding:10px;

И последнее правило — overflow(любое значение, кроме visible)"

P.S. Статью однозначно в закладки)

Edited March 2, 2012 by Odrin

[sigma77]

  On 3/2/2012 at 8:24 AM, Odrin said:

  On 3/2/2012 at 7:08 AM, sigma77 said:

Odrin,

http://jsfiddle.net/keut3/3/

Еще хуже =)

Чем?

[psywalker]

  On 3/2/2012 at 8:24 AM, Odrin said:

  On 3/2/2012 at 7:08 AM, sigma77 said:

Odrin,

http://jsfiddle.net/keut3/3/

Еще хуже =)

В общем сам разобрался =)

http://jsfiddle.net/keut3/4/

Уверен? http://jsfiddle.net/keut3/5/

[Odrin]

  On 3/2/2012 at 9:11 AM, sigma77 said:

Чем?

Тем, что отступа между блоками нету. А мне именно это нужно.

  psywalker said:

Уверен? http://jsfiddle.net/keut3/5/

Ну это уже вырожденный случай. И, как я уже писал выше, "И последнее правило — overflow(любое значение, кроме visible)". Да и еще +2 способа решения этой задачи =)

[sigma77]

  On 3/2/2012 at 10:44 AM, Odrin said:

  On 3/2/2012 at 9:11 AM, sigma77 said:

Чем?

Тем, что отступа между блоками нету. А мне именно это нужно.

Ну а подумать и задать отступ нужному родителю, если уж я ошиблась, это разве сложно?

http://jsfiddle.net/keut3/17/

[Odrin]

  On 3/2/2012 at 10:53 AM, sigma77 said:

Ну а подумать и задать отступ нужному родителю, если уж я ошиблась, это разве сложно?

http://jsfiddle.net/keut3/17/

Для этого Вы добавили в страницу еще 1 div. А это не есть хорошо.

[psywalker]

  On 3/5/2012 at 2:28 PM, Odrin said:

  On 3/2/2012 at 10:53 AM, sigma77 said:

Ну а подумать и задать отступ нужному родителю, если уж я ошиблась, это разве сложно?

http://jsfiddle.net/keut3/17/

Для этого Вы добавили в страницу еще 1 div. А это не есть хорошо.

Ради качества я бы добавил хоть 10 дивов)