W3.CSS Margin / Зовнішні відступи / Поля
Клас w3-margin додає поле в 16px (margin) до всіх сторін елемента.
W3.CSS Класи полів
W3.CSS надає наступні класи полів:
| Клас | Визначає |
|---|---|
| w3-margin | Додає поле розміром 16px до всіх сторін елемента |
| w3-margin-top | Додає верхнє поле розміром 16px до елементу |
| w3-margin-right | Додає праве поле розміром 16px до елементу |
| w3-margin-bottom | Додає нижнє поле розміром 16px до елементу |
| w3-margin-left | Додає ліве поле розміром 16px до елементу |
| w3-section | Додає верхнє и нижнє поле розміром 16px до елементу |
Margin / Поле / Край
Клас w3-margin додає поле в 16px до всіх сторін елемента:
Клас w3-margin додає поле в 16 пікселів до всіх сторін елемента.
Приклад
<div class="w3-container w3-margin">
<p>У мене є поле 16px з усіх сторін.</p>
</div>
Спробуйте самі »
Margin Top / Верхнє поле
Клас w3-margin-top додає верхнє поле 16px до елементу:
Клас w3-margin-top додає верхнє поле 16px до елементу.
Приклад
<div class="w3-container w3-margin-top">
<p>У мене верхнє поле 16px.</p>
</div>
Спробуйте самі »
Margin Bottom / Нижнє поле
Клас w3-margin-bottom додає нижнє поле 16px до елементу:
Клас w3-margin-bottom додає нижнє поле 16px до елементу.
Приклад
<div class="w3-container w3-margin-bottom">
<p>У меня нижнє поле 16px.</p>
</div>
Спробуйте самі »
Margin Left / Ліве поле
Клас w3-margin-left додає ліве поле 16px до елементу:
Клас w3-margin-left додає ліве поле до елементу.
Приклад
<div class="w3-container w3-margin-left">
<p>У мене ліве поле 16px.</p>
</div>
Спробуйте самі »
Margin Right / Праве поле
Клас w3-margin-right додає праве поле 16px до елементу:
Клас w3-margin-right додає праве поле 16px до елементу.
Приклад
<div class="w3-container w3-margin-right">
<p>У меня праве поле 16px.</p>
</div>
Спробуйте самі »
Section / Розділи
Багато елементів HTML не мають верхнього або нижнього поля за замовчуванням. Такі елементи будуть відображатися без розриву між ними:
Я синій
Я зелений
Клас w3-section може бути використано для розділення елементів.
Він додає 16px верхнє і нижнє поле до будь-якого елементу HTML:
Я синій
Я зелений
Приклад
<div class="w3-container w3-section w3-blue">
<h2>Я синій</h2>
</div>
<div class="w3-container w3-section w3-green">
<h2>Я зелений</h2>
</div>
Спробуйте самі »
