Изменение внутренних боковых отступов блока
Внутренние отступы блока (paddings, падинги) — это пространство между контентом блока и границей, отделяющей наполнение блока. Например, на стандартном мониторе (скажем, с разрешением 1920*1080 пикселей) наполнение блока будет иметь ширину 1200 пикселей (большая центральная колонка в которой расположены все элементы блока) — в этой статье рассмотрено, как изменить внутренние отступы от боковых границ этой центральной колонки с контентом (content area) до контента блока.
К примеру, вы можете увеличить или уменьшить боковые отступы одновременно для всех блоков на вашем сайте. Также можно указать разную ширину отступов в зависимости от разной ширины экрана — отдельно для отображения сайта на типовых экранах компьютера, планшета, смартфона и т.д.
Подсказка: вы можете изменить вертикальные отступы в настройках блока с помощью этой инструкции.
Вы можете проверить ширину отступов с помощью инструментов разработчика (Devtools) вашего браузера. В этой статье идёт речь об изменении боковых отступов блока именно в главной центральной части блока, в которой размещается весь контент. В DOM-дереве сайта этот HTML-элемент имеет класс w-section__inner и является дочерним элементом (находится внутри) HTML-тега <section>, который имеется в каждом блоке (кроме шапки сайта). На скриншоте зеленым цветом изображено пространство, ширину которого можно изменять кодом из этой статьи:
Подсказка: вы можете открыть инструменты разработчика (Devtools) вашего браузера на Windows с помощью кнопки F12 или комбинаций клавиш Ctrl+Shift+C. На MacOS — Cmd+Option+I.
Обратите внимание: в обычных блоках в середине страницы HTML-тег <section> имеет вид <section class="w-section">, в то время как в футере он имеет другие классы, например, <section class="footer w-section--footer w-section--no-v-padding">.
В этом разделе приведён код для изменения боковых отступов при разной ширине экрана. Вы можете скопировать этот код и изменять значения ширины отступов, указанные в каждой строке после двоеточия. Например, по мнению некоторых дизайнеров, иногда целесообразно увеличить внутренние отступы для ширины экрана 768-991 пикселей — для этого вам необходимо изменить значение по умолчанию 32px на, скажем, 40px. Тогда строка с кодом --ui-content-gutter-768: 32px; будет выглядеть как --ui-content-gutter-768: 40px;.
Код-заготовка для изменения боковых отступов блока при разной ширине экрана:
Вы можете добавить этот код к вашему сайту в его настройках в разделе Сторонний код во вкладке CSS. Детальнее про добавление CSS-кода описано в этой статье.
Подсказка: в коде между пометками /* и */ находятся комментарии, не влияющие на код. Их необязательно копировать, однако в дальнейшем они помогут вам ориентироваться в коде.
Подсказка: по желанию вы можете оставить только те свойства CSS-кода, которые вы изменяли — все остальные свойства (строки со значениями в пикселях) в коде выше имеют значение по умолчанию (дублируют внутренний код Weblium), поэтому копировать их все необязательно.
Примечание: в коде выше использованы CSS-переменные. Каждая из них имеет название, которое заканчивается на определённое число, обозначающее наименьшую ширину экрана в пикселях, при которой действует эта ширина внутренних боковых отступов блока. Однако последняя строка кода для изменения отступов на экране компьютера имеет название, связанное с шириной контейнера с контентом на сайте. Контейнером в этом случае выступает часть экрана, которая вычисляется как ширина экрана минус граница (border), внутренние (paddings) и внешние (margins) отступы блока и составляет 1200 пикселей при ширине экрана 1280 пикселей и более. До этого, при ширине экрана 992-1279 пикселей, внутренние отступы занимают 80 пикселей (по 40 с обеих сторон блока).
К примеру, вы можете увеличить или уменьшить боковые отступы одновременно для всех блоков на вашем сайте. Также можно указать разную ширину отступов в зависимости от разной ширины экрана — отдельно для отображения сайта на типовых экранах компьютера, планшета, смартфона и т.д.
Подсказка: вы можете изменить вертикальные отступы в настройках блока с помощью этой инструкции.
Проверка ширины боковых отступов
Вы можете проверить ширину отступов с помощью инструментов разработчика (Devtools) вашего браузера. В этой статье идёт речь об изменении боковых отступов блока именно в главной центральной части блока, в которой размещается весь контент. В DOM-дереве сайта этот HTML-элемент имеет класс w-section__inner и является дочерним элементом (находится внутри) HTML-тега <section>, который имеется в каждом блоке (кроме шапки сайта). На скриншоте зеленым цветом изображено пространство, ширину которого можно изменять кодом из этой статьи:
Подсказка: вы можете открыть инструменты разработчика (Devtools) вашего браузера на Windows с помощью кнопки F12 или комбинаций клавиш Ctrl+Shift+C. На MacOS — Cmd+Option+I.
Обратите внимание: в обычных блоках в середине страницы HTML-тег <section> имеет вид <section class="w-section">, в то время как в футере он имеет другие классы, например, <section class="footer w-section--footer w-section--no-v-padding">.
Изменение внутренних боковых отступов для всех блоков на сайте
В этом разделе приведён код для изменения боковых отступов при разной ширине экрана. Вы можете скопировать этот код и изменять значения ширины отступов, указанные в каждой строке после двоеточия. Например, по мнению некоторых дизайнеров, иногда целесообразно увеличить внутренние отступы для ширины экрана 768-991 пикселей — для этого вам необходимо изменить значение по умолчанию 32px на, скажем, 40px. Тогда строка с кодом --ui-content-gutter-768: 32px; будет выглядеть как --ui-content-gutter-768: 40px;.
Код-заготовка для изменения боковых отступов блока при разной ширине экрана:
:root {
--ui-content-gutter-320: 24px; /* при ширине экрана 320-480 пикселей */
--ui-content-gutter-480: 24px; /* при ширине экрана 480-767 пикселей */
--ui-content-gutter-768: 32px; /* при ширине экрана 768-991 пикселей */
--ui-content-gutter-992: 40px; /* при ширине экрана 992-1279 пикселей */
--ui-content-gutter-1200: 15px; /* при ширине экрана 1280 пикселей и более */
}Вы можете добавить этот код к вашему сайту в его настройках в разделе Сторонний код во вкладке CSS. Детальнее про добавление CSS-кода описано в этой статье.
Подсказка: в коде между пометками /* и */ находятся комментарии, не влияющие на код. Их необязательно копировать, однако в дальнейшем они помогут вам ориентироваться в коде.
Подсказка: по желанию вы можете оставить только те свойства CSS-кода, которые вы изменяли — все остальные свойства (строки со значениями в пикселях) в коде выше имеют значение по умолчанию (дублируют внутренний код Weblium), поэтому копировать их все необязательно.
Примечание: в коде выше использованы CSS-переменные. Каждая из них имеет название, которое заканчивается на определённое число, обозначающее наименьшую ширину экрана в пикселях, при которой действует эта ширина внутренних боковых отступов блока. Однако последняя строка кода для изменения отступов на экране компьютера имеет название, связанное с шириной контейнера с контентом на сайте. Контейнером в этом случае выступает часть экрана, которая вычисляется как ширина экрана минус граница (border), внутренние (paddings) и внешние (margins) отступы блока и составляет 1200 пикселей при ширине экрана 1280 пикселей и более. До этого, при ширине экрана 992-1279 пикселей, внутренние отступы занимают 80 пикселей (по 40 с обеих сторон блока).
Обновлено на: 05/12/2023
Спасибо!