--- url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D0%B2%D1%96%D0%B4%D1%81%D1%82%D1%83%D0%BF%D0%B8' title: 'Додайте місце всередині й навколо елементів | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T19:58:20+00:00' updated: '2026-10-24T20:08:10+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Дайте тексту місце всередині кольорового блока або відсуньте кнопку від абзаца над нею. Внутрішній відступ це простір усередині краю елемента; зовнішній відступ це простір зовні нього. Обидва задаються в блоковій моделі вгорі панелі Стиль. Ваша тема й новий розділ приносять власні відступи; ця сторінка показує, як ваші з ними поєднуються. У відео кнопці надано верхній зовнішній відступ 24 px. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T20:08:10+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Додайте місце всередині й навколо елементів' description: |- Дайте тексту місце всередині кольорового блока або відсуньте кнопку від абзаца над нею. Внутрішній відступ це простір усередині краю елемента; зовнішній відступ це простір зовні нього. Обидва задаються в блоковій моделі вгорі панелі Стиль. Ваша тема й новий розділ приносять власні відступи; ця сторінка показує, як ваші з ними поєднуються. У відео кнопці надано верхній зовнішній відступ 24 px. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T19:58:20+0000' dateModified: '2026-10-24T20:08:10+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D0%B2%D1%96%D0%B4%D1%81%D1%82%D1%83%D0%BF%D0%B8' articleSection: 'Стилізація елементів' - '@type': WebPage '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D0%B2%D1%96%D0%B4%D1%81%D1%82%D1%83%D0%BF%D0%B8' description: |- Дайте тексту місце всередині кольорового блока або відсуньте кнопку від абзаца над нею. Внутрішній відступ це простір усередині краю елемента; зовнішній відступ це простір зовні нього. Обидва задаються в блоковій моделі вгорі панелі Стиль. Ваша тема й новий розділ приносять власні відступи; ця сторінка показує, як ваші з ними поєднуються. У відео кнопці надано верхній зовнішній відступ 24 px. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/uk' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: uk --- [Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Створення сторінок](/uk/hc/documentation/learn-dxpr-builder/build) /[Стилізація елементів](/uk/hc/documentation/learn-dxpr-builder/element-settings) # Додайте місце всередині й навколо елементів. Вивчення DXPR BuilderСтворення сторінокСтилізація елементів ## In this guide Related guides - [Зміна розміру й кольору тексту](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0) Дайте тексту місце всередині кольорового блока або відсуньте кнопку від абзаца над нею. Внутрішній відступ це простір усередині краю елемента; зовнішній відступ це простір зовні нього. Обидва задаються в блоковій моделі вгорі панелі **Стиль**. Ваша тема й новий розділ приносять власні відступи; ця сторінка показує, як ваші з ними поєднуються. У відео кнопці надано верхній зовнішній відступ 24 px. ## Перш ніж почати - Відкрийте сторінку в DXPR Builder; наведення на елемент показує його панель керування з пунктом **Більше**. Уперше в конструкторі? Див. [Ваша перша сторінка](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%87%D0%B0%D1%82%D0%BE%D0%BA-%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D0%B8/%D0%BF%D0%B5%D1%80%D1%88%D0%B0-%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0). - **Зберегти** у діалозі зберігає зміну в редакторі. **Зберегти** на панелі інструментів конструктора над вашим вмістом зберігає сторінку й показує «Поле збережено». - **Скористайтеся блоковою моделлю**, щоб виправити один проміжок на одній сторінці. - **Скористайтеся своєю темою або класом** для відступів, що повторюються, наприклад проміжку між усіма розділами. - **Тримайтеся шкали.** Сторінки виглядають спокійно, коли кожен проміжок походить із кількох розмірів: | Розмір | Використовуйте для | |---|---| | 8 px | Малі проміжки всередині групи, наприклад значка та його мітки | | 16 px | Між пов’язаними елементами | | 24 px | Між блоками вмісту | | 32 px | Усередині картки або виокремленого блока | | 48 px | Між розділами | ## Рецепт: місце навколо кнопки 1. Наведіть вказівник на **Кнопку**, натисніть **Більше**, потім **Налаштування**. 2. Відкрийте панель **Стиль** і натисніть верхню сторону **Зовнішнього відступу**, зовнішнє кільце блокової моделі. Замки починаються відкритими, тож змінюється лише цей бік. 3. Перевірте, що кнопка одиниці показує **PX**. Введіть 24 у поле значення й натисніть Enter. Бік тепер показує 24px, і кнопка посувається вниз. 4. Натисніть **Зберегти** у діалозі, потім **Зберегти** на панелі інструментів. На кнопці зовнішній відступ лягає на саму кнопку, тож простір починається просто від її краю. ## Рецепт: вищий розділ Новий розділ отримує верхній і нижній внутрішні відступи від класу **Вертикальний внутрішній відступ, розмір 5 (py-5)**, що перемагає блокову модель. Спочатку приберіть цей клас. Перевірте, що заголовок діалогу показує «Розділ», а не «Рядок» чи «Стовпець». 1. Наведіть вказівник на **Розділ**, натисніть **Більше**, потім **Налаштування**. 2. На панелі **Загальне** знайдіть **Класи HTML** і натисніть × на чипі **Вертикальний внутрішній відступ, розмір 5 (py-5)**. Розділ утрачає частину місця вгорі й унизу. Якщо такого чипа немає, пропустіть цей крок. 3. Відкрийте панель **Стиль**. Натисніть верхню сторону **Внутрішнього відступу**, введіть 96 і натисніть Enter. 4. Зробіть так само для нижньої сторони **Внутрішнього відступу**. Обидва боки тепер показують 96px, і розділ стає вищим. 5. Натисніть **Зберегти** у діалозі, потім **Зберегти** на панелі інструментів. ## Що ви бачите Кожен заданий вами бік показує своє значення в блоковій моделі, наприклад 24px. Кнопка лежить на 24 px нижче, а розділ має по 96 px місця над і під своїм вмістом. ## Як працює блокова модель ```text +----------------- Margin ------------------+ | +-------------- Border ---------------+ | | | +----------- Padding ------------+ | | | | | | | | | | | width × height | | | | | | | | | | | +--------------------------------+ | | | +-------------------------------------+ | +-------------------------------------------+ ``` - Кожне кільце має чотири сторони. Бік показує своє значення, наприклад 24px, або «-», коли його не задано. - Натисніть бік, щоб відкрити малий засіб вибору з повзунком, полем значення й кнопкою одиниці. Одиниця це **PX** або **%**; **Межа** приймає лише px. - Введіть значення й натисніть Enter або перетягніть повзунок. Клавіші зі стрілками вгору й униз змінюють значення на 1. Escape закриває засіб вибору. - Щоб скинути бік, спорожніть поле значення й натисніть Enter. Бік показує «-», і ваша тема знову вирішує. Зовнішній відступ іде від -200 до 200, внутрішній відступ від 0 до 200, а межа від 0 до 50. Ширина й висота йдуть від 0 до 2000. Від’ємний зовнішній відступ тягне елемент до його сусіда. Введене значення поза діапазоном обрізається до найближчої межі. ### Замки Кожне кільце має замок біля своєї назви: **Зовнішній відступ**, **Межа** і **Внутрішній відступ**. Коли замок закрито, значення, задане на одному боці, переходить на всі чотири. Коли його відкрито, кожен бік зберігає власне значення. Закриття замка не змінює наявних у вас значень; копіюється лише наступне задане вами значення. ### Відсоток, розмір і ширина екрана Відсоткове значення це частка ширини батьківського елемента, для верху й низу теж. Тож верхній внутрішній відступ 10% вищий у широкому стовпці, ніж у вузькому. Середина блокової моделі тримає ширину × висоту. Елементи, що самі визначають розмір, наприклад Зображення й Карта, ігнорують ці два поля. Блокова модель не має окремих значень для кожного розміру екрана. Для більших внутрішніх відступів на великих екранах, ніж на телефонах, натомість скористайтеся класами Bootstrap. Наприклад, `py-3 py-lg-5` дає 16 px на менших екранах і 48 px від 992 px завширшки. Як їх вводити, див. [Ідентифікатор HTML і класи](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D0%B2%D0%BB%D0%B0%D1%81%D0%BD%D0%B8%D0%B9-css). ## Як ваші значення поєднуються з відступами теми - **Нові розділи приносять внутрішній відступ.** Доданий у редакторі розділ отримує клас **Вертикальний внутрішній відступ, розмір 5 (py-5)**: 3rem, близько 48 px, угорі й унизу. Клас позначено `!important`, тож він перемагає ваш верхній і нижній **Внутрішній відступ**. Лівий і правий внутрішні відступи працюють далі. - **Класи відступів перемагають.** Будь-який клас відступів Bootstrap під **Класи HTML**, наприклад **Верхній зовнішній відступ, розмір 3 (mt-3)**, перемагає ваше значення на тому самому боці. - **Стовпці зберігають проміжок.** Bootstrap дає кожному стовпцю по 12 px внутрішнього відступу ліворуч і праворуч. Лівий або правий **Внутрішній відступ** на стовпці його замінює, тож вміст більше не вирівнюється з наступним стовпцем. - **Абзаци зберігають власні відступи.** Ваша тема кладе простір під кожним абзацом і заголовком. Блокова модель не змінює цей простір, бо діє на елемент у цілому. - **Зовнішні відступи сусідів зазвичай перекриваються.** Коли один елемент лежить над іншим, нижній зовнішній відступ першого й верхній зовнішній відступ другого ділять проміжок. Перемагає більший; вони не додаються. ## Якщо ви цього не бачите - **Верхній або нижній внутрішній відступ на розділі нічого не робить.** Клас **Вертикальний внутрішній відступ, розмір 5 (py-5)** перемагає. Приберіть його чип під **Класи HTML**. - **Значення зовнішнього або внутрішнього відступу нічого не робить.** Клас відступів Bootstrap на тому самому боці перемагає. Приберіть його чип або скористайтеся лише класом. - **Внутрішній відступ не показується.** Елемент не має тла або межі, тож простір невидимий. Виберіть **Тло**, поки його налаштовуєте. - **Значення стрибнуло до 200.** Внутрішній і зовнішній відступи зупиняються на 200, межа на 50. Скористайтеся меншим значенням або відсотком. - **Сторінка тісна на телефонах.** Те саме значення в пікселях застосовується на кожному екрані. Скористайтеся меншими значеннями, відсотком або адаптивними класами. - **Два проміжки не додалися.** Складені зовнішні відступи перекриваються, і перемагає більший. Покладіть увесь проміжок на один із двох елементів. - **Стовпці більше не вирівнюються.** Бічний **Внутрішній відступ** на стовпці замінив проміжок сітки. Знову спорожніть ці сторони. ## Що далі? - [Типографіка](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0): задайте розмір і колір тексту всередині свого розсунутого блока.