Схлопывание WTF!?

Hell&Heaven™ · July 23, 2012

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


<h1> ТЕКСТ1 </h1>
<p> ТЕКСТ2 </p>

h1 {
margin-bottom:20px;
}

p {
margin-top:20px;
}

тут мы видим что образуется схлопывание, т.е отступ будет между этими элементами не 40px, а 20px.

из книги:

cхлопывание не срабатывает если:

для элементов, у которых установлено свойство padding.

для элементов, у которых на стороне схлопывания задана граница;

на плавающих элементах (для них свойство float задано как left или right);

для строчных элементов;

для <html>.

для элементов, у которых значение overflow задано как auto, hidden или scroll схлопывание не

действует для их дочерних элементов;

пробовал:


<h1> ТЕКСТ1 </h1>
<p> ТЕКСТ2 </p>

h1 {
margin-bottom:20px;
border-bottom:1px solid black;
}

p {
margin-top:20px;
}

отступ также остается 20px, а не 40px как поидее должно быть

пробовал:


<h1> ТЕКСТ1 </h1>
<p> ТЕКСТ2 </p>

h1 {
margin-bottom:20px;
padding:1px;
}

p {
padding:1px;
margin-top:20px;
}

отступ также остается 20px, а не 40px как поидее должно быть

пробовал:


<div>
<h1> ТЕКСТ1 </h1>
<p> ТЕКСТ2 </p>
</div>

h1 {
margin-bottom:20px;
}

p {
margin-top:20px;
}

div {
overflow:hidden;
}

отступ также остается 20px, а не 40px как поидее должно быть.

WTF? пора спать ? или я не так понимаю что то, поидее схлопывание должно отменятся и отступы складываться, но почему этого не происходит?

Edited July 24, 2012 by Hell&Heaven™

hypnocolor · July 23, 2012

Это всё, конечно, чудесно и захватывающе, но почему у вас <p> закрывается </h2>?

А вообще, задайте параграфу float: left и отсыпайтесь

Edited July 23, 2012 by hypnocolor

Hell&Heaven™ · July 24, 2012

Это всё, конечно, чудесно и захватывающе, но почему у вас <p> закрывается </h2>?
А вообще, задайте параграфу float: left и отсыпайтесь

h2 это опечатка.

ну как то бредово, делать элементы плавающими когда по логике этого делать не нужно.

а что по поводу этого? Почему не срабатывает?

cхлопывание не срабатывает если:
для элементов, у которых установлено свойство padding.
для элементов, у которых на стороне схлопывания задана граница;
на плавающих элементах (для них свойство float задано как left или right);
для строчных элементов;
для <html>.
для элементов, у которых значение overflow задано как auto, hidden или scroll схлопывание не
действует для их дочерних элементов;

hedgehog · July 24, 2012

WTF? пора спать ? или я не так понимаю что то, поидее схлопывание должно отменятся и отступы складываться, но почему этого не происходит?

Пора спать Границы, паддинги и оверфлоу не мешают схлопываться margin соседних элементов, потому что эти отступы - внешние. Описанные методы работают только для родительского и дочернего элементов.

Hell&Heaven™ · July 24, 2012

WTF? пора спать ? или я не так понимаю что то, поидее схлопывание должно отменятся и отступы складываться, но почему этого не происходит?
Пора спать Границы, паддинги и оверфлоу не мешают схлопываться margin соседних элементов, потому что эти отступы - внешние. Описанные методы работают только для родительского и дочернего элементов.

спасибо, все стало на свои места)

Sign In

Схлопывание WTF!?

Question

Hell&Heaven™

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

hypnocolor

Link to comment

Share on other sites

Hell&Heaven™

Link to comment

Share on other sites

hedgehog

Link to comment

Share on other sites

Hell&Heaven™

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information