Как понять этот способ борьбы с collapsing margins?

Question

[dhat]

В этой статье прочитал про способ борьбы с схлопыванием вертикальных марджинов. Вот ссылка на метод - csswizardry.com/2012/06/single-direction-margin-de...

Вроде просто, использовать только лишь margin-bottom. Но что происходит с margin-top, который идет по дефолту, например у h1? В этой статье человек четко описывает код:

h1,h2,h3,h4,h5,h6,hgroup,
ul,ol,dd,
p,figure,
pre,table,fieldset,hr {
    margin-bottom:1.5rem;
}

Это же никак не влияет на дефолтный margin-top у h1, например. Т.е. все по прежнему будет схлопываться, насколько я понимаю? Почему он не написал что нужно обнулять margin-top? Или его не нужно обнулять? Ничего не понимаю уже.

Answer 1

[Андрей Верх]

Будет схлопываться, если под условия схлопывания попадает.
Лучше почитайте что нибудь более подробное, вроде htmlbook. Там описаны и методы избежания схлопывания.

Comments

[dhat]

В этой статье я не вижу глобального правила, которое можно применять с самого старта проекта.

[dhat]

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

[Андрей Верх]

Не существует никакого глобального правила. Схлопывание это фишка CSS.
Не используйте margin-top или padding задайте вместо него.

[dhat]

Андрей Верх: а эта статья тогда о чем по вашему, как не о глобальном правиле, вроде reset css? csswizardry.com/2012/06/single-direction-margin-de...

[Андрей Верх]

dhat: о вертикальном ритме.
Задайте margin-top:0 и будет у вас глобальное правило.

[dhat]

Андрей Верх: вот я и думаю, нужно ли его задавать и самое главное (почему и тему создавал) - я не понял логики автора этой статьи, почему он об этом ни слова не сказал??? В целом, насколько я я понимаю, этот margin и так сбрасывается, если использовать reset.css...

[Андрей Верх]

dhat: Можно. В reset'е обычно все марджины и паддинги сбрасываются первым делом.
Верхним марджином лучше вообще не пользоваться, т.к. сама логика страницы "сверху-вниз", это подразумевает.

[Сергей delphinpro]

Андрей Верх: >>Задайте margin-top:0
грубый пример: отступ у параграфа и заголовка
https://jsfiddle.net/zpszydwz/
Во втором случае нет отбивки второго заголовка.

[Андрей Верх]

Сергей: А должно? Так-то можно и padding добавить

[Сергей delphinpro]

Андрей Верх: Не важно. Это просто грубая демонстрация того, как схлопывание удобно регулирует отступы. Padding - внутренний отступ, а тут отступ внешний. Одно на другое подменять нежелательно.

[Андрей Верх]

Сергей: В примере всё отличие good от bad, только в наличии margin-top:50 у заголовка. С таким же успехом, я могу во втором примере задать padding:20. "Нежелательно", это не аргумент.

Если вам так удобнее - пожалуйста. На мой взгляд это не "прозрачно" т.к. размеры разные могут быть и то что в одном месте схлопывается, в другом не будет. И при дебаге не всегда поймёшь что с чем схлопывается...Гораздо проще, придерживаться стратегии задавая только нижний отступ.

[Сергей delphinpro]

Андрей Верх: >> "Нежелательно", это не аргумент.
margin - для задания внешних отступов, т.е. отступов между элементами. padding - для внутрнних отступов. Вы с вашей логикой можете задать прозрачный верхний бордер для отступа. И оно будет работать. До определенного момента.

>> Если вам так удобнее - пожалуйста.
Не мне удобнее. Это - правильно.

>> И при дебаге не всегда поймёшь что с чем схлопывается...
Только если вы не понимаете, как оно работает.

>> Гораздо проще
Проще не значит правильнее.

[Андрей Верх]

Сергей: Представляете, иногда и прозрачные бордеры приходится использовать. А всё потому, что в вёрстке часто костыль на костыле. И у каждого своё представление о коде и том, какой он должен быть.

>Не мне удобнее. Это - правильно.
Тогда вы вероятно легко найдёте статью которая это сможет подтвердить...как правильно.

>Только если вы не понимаете, как оно работает.
Не нужно разводить "писькомерство". Вы никогда не определите визуально что с чем схлопнулось. Для этого придётся посмотреть отступы у обоих схлопнутых элементов.

[Сергей delphinpro]

Андрей Верх: >> Тогда вы вероятно легко найдёте статью которая это сможет подтвердить...
Зачем искать. Можно просто прочесть спецификацию и узнать, какие свойства для чего предназначены =)

>>Не нужно разводить "писькомерство". Вы никогда не определите визуально что с чем схлопнулось.
Даже не знаю что ответить... Я прекрасно "вижу" (или "знаю", как угодно) что с чем схлопывается.

>>А всё потому, что в вёрстке часто костыль на костыле.
В верстке костыли может наделать только верстальщик. Иногда без них не обойтись, согласен. Но все же стоит избегать такого и делать верстку более предсказуемой. Предсказуемой - это значит не очевидной для вас, а макcимально выполненной с учетом спецификаций, чтобы любой знающий специалист мог без особого труда в ней разобраться.

>>Представляете, иногда и прозрачные бордеры приходится использовать.
Приходится. Кто же спорит? Но тут ключевое слово "приходится", а чаще делают "потому что проще", "по-другому не умею" и т.п.

[Андрей Верх]

>Зачем искать. Можно просто прочесть спецификацию и узнать, какие свойства для чего предназначены =)
Вы даже не потрудились дать на неё ссылку. Хотя разумеется там не написано что нужно использовать margin.

Это у блока с бордером, можно сказать где разница между padding и margin, а у блока без границ, никакой разницы не будет. Именно поэтому, не может быть в природе никаких "спецификаций", которые чётко скажут что в одном месте нужно применить pading, а в другом margin.

Дальше продолжать диалог, нет смысла. Вы вместо конструктива, пытаетесь свою правоту доказать, не желая ничего слушать.