> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Изменение внутренних боковых отступов блока

Внутренние отступы блока (paddings, падинги) — это пространство между контентом блока и границей, отделяющей наполнение блока. Например, на стандартном мониторе (скажем, с разрешением 1920*1080 пикселей) наполнение блока будет иметь ширину 1200 пикселей (большая центральная колонка в которой расположены все элементы блока) — в этой статье рассмотрено, как изменить внутренние отступы от боковых границ этой центральной колонки с контентом (content area) до контента блока.

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

| ${color}[#1aa900](Подсказка:) вы можете изменить вертикальные отступы в настройках блока с помощью [этой инструкции](/ru/article/izmenenie-dizajna-bloka-s9tme4/#3-izmenenie-vida-bloka).

# Проверка ширины боковых отступов
Вы можете проверить ширину отступов с помощью инструментов разработчика (Devtools) вашего браузера. В этой статье идёт речь об изменении боковых отступов блока именно в главной центральной части блока, в которой размещается весь контент. В DOM-дереве сайта этот HTML-элемент имеет класс `w-section__inner` и является дочерним элементом (находится внутри) HTML-тега `<section>`, который имеется в каждом блоке (кроме шапки сайта). На скриншоте зеленым цветом изображено пространство, ширину которого можно изменять кодом из этой статьи:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/eng-cb-1_4qsrol.png)

| ${color}[#1aa900](Подсказка:) вы можете открыть инструменты разработчика (Devtools) вашего браузера на Windows с помощью кнопки F12 или комбинаций клавиш Ctrl+Shift+C. На MacOS — Cmd+Option+I.
|| ${color}[#ffa800](Обратите внимание:) в обычных блоках в середине страницы 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
: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-кода описано в этой статье](/ru/article/dobavlenie-koda-css-na-sajt-1rza0ti/#3-dobavlenie-koda-css-na-sajt).

| ${color}[#1aa900](Подсказка:) в коде между пометками `/*` и `*/` находятся комментарии, не влияющие на код. Их необязательно копировать, однако в дальнейшем они помогут вам ориентироваться в коде.
| ${color}[#1aa900](Подсказка:) по желанию вы можете оставить только те свойства CSS-кода, которые вы изменяли — все остальные свойства (строки со значениями в пикселях) в коде выше имеют значение по умолчанию (дублируют внутренний код Weblium), поэтому копировать их все необязательно.
|| ${color}[#ffa800](Примечание:) в коде выше использованы CSS-переменные. Каждая из них имеет название, которое заканчивается на определённое число, обозначающее наименьшую ширину экрана в пикселях, при которой действует эта ширина внутренних боковых отступов блока. Однако последняя строка кода для изменения отступов на экране компьютера имеет название, связанное с шириной _контейнера с контентом_ на сайте. Контейнером в этом случае выступает часть экрана, которая вычисляется как ширина экрана минус граница (border), внутренние (paddings) и внешние (margins) отступы блока и составляет 1200 пикселей при ширине экрана 1280 пикселей и более. До этого, при ширине экрана 992-1279 пикселей, внутренние отступы занимают 80 пикселей (по 40 с обеих сторон блока).