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>
Попробуйте сами »
