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

Если Вы хотите внести свои изменения, существует несколько способов изменить отступы в конструкторе страниц:

  • Локально. Вы можете изменить поля и отступы отдельных строк и столбцов, а также изменить поля отдельных модулей. Вы можете установить разные значения для каждого размера устройства.
  • Для всего сайта. Вы можете изменить настройки по умолчанию для каждого размера устройства, которые затем используются как значения по умолчанию в отдельных строках и модулях.
  • Интервалы для мобильных устройств. Вы можете отключить функцию автоматического определения отступов для мобильных устройств, либо переписать ее значения отступов на желаемые.

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

Краткий обзор отступов и полей в стилях CSS

Как показано на схеме ниже, каждый элемент имеет свою высоту и ширину, границу, отступ и поле. Отступ – это расстояние между контентом (например, текстовым блоком или изображением и границей. Поле – это расстояние от границы до поля соседнего элемента на странице.

пример отступов

Обратите внимание: если CSS свойство блока box-sizing: border-box, значения высоты и ширины включают в себя контент, отступ и поле.

Советы по базовой настройке полей и отступов

Различные способы комбинации настроек отступов, границ и полей могут быть довольно сложными. Вот несколько рекомендаций по работе с этими настройками.

  • Сначала настройте макет Вашей страницы для стандартных устройств (компьютеры и ноутбуки). Как только вы разберетесь, как конструктор изменяет отступы для мобильных устройств (смартфоны и планшеты), вы можете по ходу работы переключаться для настроек страниц сразу для всех видов устройств.
  • Сперва создайте «скелет» всей страницы, прежде чем настраивать отступы и поля, чтобы Вам не пришлось делать двойную работу, если в макете страницы Вы что-то измените.
  • Корректируйте поля и отступы для разных модулей, колонок и строк на вкладке Расширенные
  • Если Вы обнаружите, что Вы постоянно меняете поля и отступы – возможно, Вам следует изменить настройки по умолчанию.
  • Как только Вы настроите настройки для обычных устройств – проверьте настройки для мобильных и планшетов. Вернитесь на вкладку Расширенные и переключитесь на желаемый вид устройств, кликнув на иконку устройства. По умолчанию, настройки заданные для обычных устройств используются и для мобильных, но Вы можете изменить их на желаемые.

на компе

Нажмите на иконку устройства еще раз, чтобы переключить предпросмотр сайта на вид для мобильных устройств. Функция автоматического назначения отступов и полей задаст их значения для строк, колонок и модулей. Если результат Вас не устроит – Вы можете задать собственные значения.

на мобильных