отрицательный margin растягивает родителя

USF · August 12, 2012

Здравствуйте.

Возникла проблемка.

<div>
 <h3>
   <span>

У div фиксированные размеры. У span тоже(он display: block). При этом по задумке span должен на 50% вылезать за пределы div. Но задавая ему отрицательый margin-top я получаю то, что div начинает ползти вверх за span'ом. Вижу такое впервые, откровенно говоря, по идее он должен за границу вылезти :blink:

Конечно, решить проблему можно через display:relative+ top, но интересно, что с маргином :unsure:

wwt · August 12, 2012

http://jsfiddle.net/8sEJH/1/

достаточно просто прописать позиционирование без top.

Edited August 12, 2012 by wwt

USF · August 12, 2012

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

и мне интересно, почему.

вот, союственно

http://jsfiddle.net/GbWFt/7/

вместо

position: relative;
top: -50px;

попробуйте отрицательный маргин

wwt · August 13, 2012

http://jsfiddle.net/GbWFt/8/ пожалуйста. Только у родителя( h3 ) нуна задать ширину и прописать ему display:inline-block

В первом моем примере тогда нужно делать так http://jsfiddle.net/8sEJH/2/

Edited August 13, 2012 by wwt

USF · August 13, 2012

хм, инлайн-блок для h3 и работает как предполагалось..

интересно :blink:

wwt · August 13, 2012

ну можно заменить display:inline-block к примеру на padding:1px или border-top:1px solid transparent у h3 но это может повлиять на макет и потому мне кажется в данном случае display все же получше)) Тут дело вот в чем:

У блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания, когда отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Для отступов слева и справа схлопывание никогда не применяется.
Схлопывание не срабатывает:
-для элементов, у которых на стороне схлопывания задано свойство padding.
-для элементов, у которых на стороне схлопывания задана граница;
-на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
-на плавающих элементах (для них свойство float задано как left или right);
-для строчных элементов;
-для <html>.

точнее можно прочитать тут www.w3.org/TR/CSS21/box.html#propdef-margin раздел 8.3.1 Collapsing margins

Edited August 13, 2012 by wwt

USF · August 13, 2012

блииин, вот в чем дело, а я чот с этой позиции на схлопывание не посмотрел :facepalmxd:

спасибо за объяснение :rolleyes:

Sign In

отрицательный margin растягивает родителя

Question

USF

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

wwt

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information