Додайте місце всередині й навколо елементів.

Вивчення DXPR BuilderСтворення сторінокСтилізація елементів

Дайте тексту місце всередині кольорового блока або відсуньте кнопку від абзаца над нею. Внутрішній відступ це простір усередині краю елемента; зовнішній відступ це простір зовні нього. Обидва задаються в блоковій моделі вгорі панелі Стиль. Ваша тема й новий розділ приносять власні відступи; ця сторінка показує, як ваші з ними поєднуються.

У відео кнопці надано верхній зовнішній відступ 24 px.

Перш ніж почати

  • Відкрийте сторінку в DXPR Builder; наведення на елемент показує його панель керування з пунктом Більше. Уперше в конструкторі? Див. Ваша перша сторінка.
  • Зберегти у діалозі зберігає зміну в редакторі. Зберегти на панелі інструментів конструктора над вашим вмістом зберігає сторінку й показує «Поле збережено».
  • Скористайтеся блоковою моделлю, щоб виправити один проміжок на одній сторінці.
  • Скористайтеся своєю темою або класом для відступів, що повторюються, наприклад проміжку між усіма розділами.
  • Тримайтеся шкали. Сторінки виглядають спокійно, коли кожен проміжок походить із кількох розмірів:
Розмір Використовуйте для
8 px Малі проміжки всередині групи, наприклад значка та його мітки
16 px Між пов’язаними елементами
24 px Між блоками вмісту
32 px Усередині картки або виокремленого блока
48 px Між розділами

Рецепт: місце навколо кнопки

  1. Наведіть вказівник на Кнопку, натисніть Більше, потім Налаштування.
  2. Відкрийте панель Стиль і натисніть верхню сторону Зовнішнього відступу, зовнішнє кільце блокової моделі. Замки починаються відкритими, тож змінюється лише цей бік.
  3. Перевірте, що кнопка одиниці показує PX. Введіть 24 у поле значення й натисніть Enter. Бік тепер показує 24px, і кнопка посувається вниз.
  4. Натисніть Зберегти у діалозі, потім Зберегти на панелі інструментів.

На кнопці зовнішній відступ лягає на саму кнопку, тож простір починається просто від її краю.

Панель «Стиль» кнопки з верхнім зовнішнім відступом 24px у блоковій моделі поруч із кнопкою Book a tour із місцем над нею під текстом Campus tours

Рецепт: вищий розділ

Новий розділ отримує верхній і нижній внутрішні відступи від класу Вертикальний внутрішній відступ, розмір 5 (py-5), що перемагає блокову модель. Спочатку приберіть цей клас. Перевірте, що заголовок діалогу показує «Розділ», а не «Рядок» чи «Стовпець».

  1. Наведіть вказівник на Розділ, натисніть Більше, потім Налаштування.
  2. На панелі Загальне знайдіть Класи HTML і натисніть × на чипі Вертикальний внутрішній відступ, розмір 5 (py-5). Розділ утрачає частину місця вгорі й унизу. Якщо такого чипа немає, пропустіть цей крок.
  3. Відкрийте панель Стиль. Натисніть верхню сторону Внутрішнього відступу, введіть 96 і натисніть Enter.
  4. Зробіть так само для нижньої сторони Внутрішнього відступу. Обидва боки тепер показують 96px, і розділ стає вищим.
  5. Натисніть Зберегти у діалозі, потім Зберегти на панелі інструментів.

Панель «Стиль» розділу з 96px верхнього й нижнього внутрішнього відступу поруч із цим розділом, тепер вищим, із сірим тлом і центрованим текстом

Що ви бачите

Блокова модель із внутрішнім відступом 32 px з кожного боку й нижнім зовнішнім відступом 48 px поруч із сірим блоком Campus tours і кнопкою на 48 px нижче

Кожен заданий вами бік показує своє значення в блоковій моделі, наприклад 24px. Кнопка лежить на 24 px нижче, а розділ має по 96 px місця над і під своїм вмістом.

Як працює блокова модель

+----------------- 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 і класи.

Як ваші значення поєднуються з відступами теми

  • Нові розділи приносять внутрішній відступ. Доданий у редакторі розділ отримує клас Вертикальний внутрішній відступ, розмір 5 (py-5): 3rem, близько 48 px, угорі й унизу. Клас позначено !important, тож він перемагає ваш верхній і нижній Внутрішній відступ. Лівий і правий внутрішні відступи працюють далі.
  • Класи відступів перемагають. Будь-який клас відступів Bootstrap під Класи HTML, наприклад Верхній зовнішній відступ, розмір 3 (mt-3), перемагає ваше значення на тому самому боці.
  • Стовпці зберігають проміжок. Bootstrap дає кожному стовпцю по 12 px внутрішнього відступу ліворуч і праворуч. Лівий або правий Внутрішній відступ на стовпці його замінює, тож вміст більше не вирівнюється з наступним стовпцем.
  • Абзаци зберігають власні відступи. Ваша тема кладе простір під кожним абзацом і заголовком. Блокова модель не змінює цей простір, бо діє на елемент у цілому.
  • Зовнішні відступи сусідів зазвичай перекриваються. Коли один елемент лежить над іншим, нижній зовнішній відступ першого й верхній зовнішній відступ другого ділять проміжок. Перемагає більший; вони не додаються.

Якщо ви цього не бачите

  • Верхній або нижній внутрішній відступ на розділі нічого не робить. Клас Вертикальний внутрішній відступ, розмір 5 (py-5) перемагає. Приберіть його чип під Класи HTML.
  • Значення зовнішнього або внутрішнього відступу нічого не робить. Клас відступів Bootstrap на тому самому боці перемагає. Приберіть його чип або скористайтеся лише класом.
  • Внутрішній відступ не показується. Елемент не має тла або межі, тож простір невидимий. Виберіть Тло, поки його налаштовуєте.
  • Значення стрибнуло до 200. Внутрішній і зовнішній відступи зупиняються на 200, межа на 50. Скористайтеся меншим значенням або відсотком.
  • Сторінка тісна на телефонах. Те саме значення в пікселях застосовується на кожному екрані. Скористайтеся меншими значеннями, відсотком або адаптивними класами.
  • Два проміжки не додалися. Складені зовнішні відступи перекриваються, і перемагає більший. Покладіть увесь проміжок на один із двох елементів.
  • Стовпці більше не вирівнюються. Бічний Внутрішній відступ на стовпці замінив проміжок сітки. Знову спорожніть ці сторони.

Що далі?

  • Типографіка: задайте розмір і колір тексту всередині свого розсунутого блока.