Отступы в списках

Igor Shtang
Дизайн-кабак
3 min readNov 12, 2018

--

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

Ответ: не нужно. Это смотрится так же несуразно, как висячая пунктуация. Список не выглядит отдельным блоком, а первый пункт похож на продолжение абзаца. Проблема особенно заметна, если пункта всего два. Первый слипается с текстом, а второй отваливается. Даже непонятно, что это список:

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

Еще лучше превратить обобщающее предложение в заголовок и объединить со списком. Правда, не всегда это возможно. Обратите внимание, к заголовку я тоже не прижимаю. Под ним такой же отступ, как и между пунктами:

Подробнее про размеры отступов. На примере всё кратно половине интерлиньяжа (не кегля!). Интерлиньяж здесь 22, половина 11. Между пунктами стоит половина, перед списком один интерлиньяж (пробельная строка), под списком можно сделать один или полтора-два:

Последний вариант получился неплохо, но он всё равно не очень крутой. Более собранными выглядят списки, у которых между пунктами вообще нет отбивок. На нижнем примере внутренние отступы равны нулю, внешние — одной строке, поэтому базовый ритм текста не сбивается. Раньше на бумаге так и верстали, в вебе начали отбивать.

Чтобы не перепутать однострочные элементы с многострочными, нужны маркеры или цифры.

Интересно, что такие списки нормально смотрятся и впритык к верхнему абзацу. Нормально, но не более того.

Если элементы короткие, то внутренние отбивки точно не нужны. Маркеры в этом случае можно опустить:

С отбивками получится размазанно:

См. также: Что я думаю об этой вашей висячей пунктуации

--

--