Это черновик, служащий как мини-очерк по оформлению статей. Здесь находится вся инфа и код, которыми я могу поделиться, но не могу запихнуть это в полноценный очерк.

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

Отступы

Начну с простых вещей, вам нужно делать осмысленные отступы. Нельзя делать так, чтобы элементы на вашей страницы слипались друг с другом. Для этого изменяйте на существующих/новых блоках значения padding/margin. Первое это значение внутреннего отступа, второе — внешнего. Если вам не совсем понятно, какой отступ изменить, потыкайте значения в предпросмотре/через инструменты веб-разработчика.

Желтая область - отступ в 1rem

Обычно, я использую отступ в 1rem между блоками. Это для большинства случаем идеальный размер отступа, который добавляет достаточно пространства, чтобы блок и не слипся и был визуально отделен от другой части статьи. Это касается внешних отступов.

Со внутренними поступаем аккуратнее — если вы оборачиваете большой кусок статьи в блок, убедитесь, что внутренние отступы слева и справа минимальные. Чем больше отступы внутри блока, тем уже становится читаемая область статьи. В моем примере стоят отступы 24px, но это, наверное, максимальное приемлемое значение. Особенно это касается мобильных устройств, где изначальная область чтения и так узкая, а добавляя отступы вы делаете ее еще уже.

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

Старайтесь соблюдать установленные вами значения отступов, чтобы внутри одной статьи они не "скакали" без причины. Это не значит, что разные отступы делать нельзя, просто делайте это у разных по значению блоков. То есть внутри блока "предупреждения" о чем-то, где информации мало, отступы могут быть больше, чем например в блоке, в который вы обернули какое-либо приложение статьи.

Горизонтальные элементы

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

Горизонтальные блоки, идущие
сразу за вертикальными

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

Самый приемлемый вариант — 2, 3, с натяжкой 4 элемента в горизонтальном виде. Не советую пробовать последний вариант, потому что я сам не нашел еще удачного применения четырех горизонтальных элементов. Экспериментируйте с видом информации и количеством, которые вы можете предоставить читателю в таком виде. Из самых очевидных и используемых вариантов: записки, карточки, ссылки,