Этот сайт содержит большие скриншоты и встроенные примеры сложных компоновок блоков, поэтому он оптимизирован для достаточно широких экранов. Хотя бы от 1280 пикселей.

Отступы, выравнивание, размеры

У блока есть два вида отступов: внутренний и внешний. Внутренний регулирует отступ между границей блока и его содержимым:

Вертикальные отступы в 100 пикселей, горизонтальные в 20.

Но позиционировать контент внутри блока можно и при помощи задания высоты/ширины блока. И то, и то можно задать как фиксированным значением, так и диапазоном. Например, для этого блока текста задана ширина не больше 400 пикселей.

Горизонтальное выравнивание внутри блока задается отдельной настройкой.

Но это выравнивание именно текстового контента. Если блок состоит из сложных элементов или из других блоков (контейнер), их выравнивание лучше настраивать флексбоксом.

Сочетая выравнивание, отступы и высоту/ширину, можно позиционировать контент блока так, как вам нужно:

По центру

Справа снизу с небольшими отступами

Внешний отступ отвечает за расстояние между блоком и его соседямb. У обоих блоков выше заданы внешние отступы в 20 пикселей.

У горизонтальных внешних отступов можно задать значение “максимум” (auto) - тогда блок отступит от правого/левого края/соседа на максимально возможную дистанцию, прижав остальные блоки контейнера к краям. Вот два блока, во втором у первой иконки задан максимальный отступ справа:

А еще внешний отступ может быть отрицательным. Например, здесь это использовано для "наезда" блоков друг на друга:

Netcat 6 — это чудесно

Netcat 6 — это чудесно

Netcat 6 — это чудесно