Margin-top у h1?

Question

[account-4]

Just curious, почему у h1 очень часто не делают margin-top?
Это какое-то типографское правило дизайна? У этого есть какая-то рациональная цель?
Я понимаю, что можно делать как угодно и как требует дизайн, просто любопытно.

апд. Речь только о h1. Почему именно у h1 очень часто не делают margin-top?

Answer 1

[iBird Rose]

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

Comments

[account-4]

да, но при этом у всех остальных заголовков есть марджины, h2,h3 и тд. Иначе я бы не спрашивал! Поэтому и написал "Margin-top у h1?", а не "Margin-top у headings?"

[account-4]

Так что сорри, логики я по прежнему не вижу, почему ТОЛЬКО у h1 не делают марджины.

[iBird Rose]

account-4: где ты такое увидел и с чего ты думаешь что это частое явление?

[account-4]

iBird Rose: очень частое, вижу это буквально везде, каждый второй фреймворк, каждый второй качественный сайт. Это 100% распространеннейшая практика.

[account-4]

Сорри за несуществующее слово, но это так.

[account-4]

Но если интересно, то вот этот сервис для меня стал последней каплей и я не выдержал узнавать, почему так для h1 - www.modularscale.com

Answer 2

[Сергей delphinpro]

Всё очень просто. Потому что он, как правило, идет первым, и этот марджин мешает выровнять по дизайну.

Comments

[account-4]

Так я тогда вообще озадачен. Ну вот представим страницу. Вверху хедер, под ним блок с контентом. Внутри у нас первым идет этот самый h1. И он идет у нас без margin-top, т.е. впритык с хедером. Далее у нас параграф и под ним h2, и тут-то у h2 есть margin-top, и получается у нас что крупный текст впритык к соседнему элементу, а h2 c зиящей щелью)).

[account-4]

Т.е. дополнительно придется скакать с padding или margin у самого блока с контентом, чтоб отделить безмаржиновый h1 сверху от соседнего элемента. И я пытаюсь найти в этом логику.

[Сергей delphinpro]

account-4: https://jsfiddle.net/65wLzs3L/

[account-4]

Сергей: не информативно, если честно.

[account-4]

Сергей: вот смотрите - codepen.io/kodekrendel/pen/vxpwya
Я использовал type-scale.com для типографики. Тут как раз нету марджин-топов.

[Сергей delphinpro]

account-4: Это печально.

[Сергей delphinpro]

account-4: вообще-то margin-top0 там есть. к чему этот пример?

[account-4]

Сергей: что именно? Ваш пример? Согласен, он очень уныл)))

[account-4]

Сергей: что? Внимательно смотри. Это ж не чат, ей богу.

[Сергей delphinpro]

account-4: я спрашиваю, нафига этот пример приведен? codepen.io/kodekrendel/pen/vxpwya

[account-4]

Сергей: а что смущает? Он как раз описывает то, о чем я говорю. Странный вопрос)))

[account-4]

Сергей: на ДЫРКУ перед h2 посмотри.

[Сергей delphinpro]

account-4: так ты же сам эту дырку сделал. Уменьши, какие проблемы?

[account-4]

Сергей: лол, так это пропорции выверены. Смешные люди. Нахера давать комменты не зная типографики? + в половине фреймворков также. Короче, все ясно))

[Сергей delphinpro]

Рад за тебя. А вот мне нихрена не ясно. С какого ты об этой "дырке" заговорил, если тебя интересует h1 заголовок?
Я уже сказал, h1 как правило первый в текстовом потоке. Первому элементу не нужен верхний отступ. Как это можно не понять? хз.

[account-4]

Сергей: да потому что эта "дырка" и есть причина, по которйо я тему создал)) Я тебе привел пример - codepen.io/kodekrendel/pen/vxpwya По твоему это ок выглядит и тут не нужен отступ сверху? Ок, делай так, клиенты будут рады (если они конечно есть).

[account-4]

Особенно понравился совет "Уменьши, какие проблемы?"))) Ваще красаучик)) Вертикальный ритм? Да похер все. На глазок ща сбацаем.

[Сергей delphinpro]

account-4: Ладно. начнем сначала...
Представим другой дизайн.
Ты ратуешь за отступ. Получается какашка - codepen.io/anon/pen/evyaVv
Все делают без отступа. Получается норм - codepen.io/anon/pen/vxpwdQ

Если тебя и это не просветлит, то я - пас. =))

[Сергей delphinpro]

account-4: и не надо мне про вертикальный ритм задвигать. Ты лучше про это дизайнерам расскажи, которые сайты рисуют..

[account-4]

Сергей: да, в этом примере вижу что без отступа красивше)) Ок, тема закрыта, спс.

Answer 3

[Алексей Струков]

H1 по хорошему должен быть один на странице. Чаще всего он на фоне hero-блока отцентрирован по вертикали. Тот самый header, про который вы все говорите, это и должен быть h1.

Comments

[account-4]

нет, я о хедере, тот который навигация сайта, а не заголовок статьи.

[Алексей Струков]

account-4: всмысле логотип?

[account-4]

Алексей Струков: codepen.io/kodekrendel/pen/vxpwya

[Алексей Струков]

account-4: codepen.io/anon/pen/WpdBON?editors=1111
Примерно так. Значения для размера шрифта взял примерные. Точные можно найти в интеренете и межстрочное растояние заодно. Часть твоих стилей выпилил для удобства, но суть думаю будет понятна)

[account-4]

Алексей Струков: не-не, мне подгонять вручную расстояния и шрифты не надо. Они отсюда - type-scale.com
Мне надо понять логику, почему у h1 нету отступа.

[Алексей Струков]

account-4: ну там же выше обьяснили, что у h1 верхний маргин ненужен, так как он первый и прилегает к верхнему краю контейнера. Но по желанию можно сделать и отступ)