Поля W3.CSS
Класс w3-margin добавляет отступ в 16 пикселей со всех сторон элемента.
Классы маржи W3.CSS
W3.CSS предоставляет следующие классы маржи:
Класс | Определяет |
---|---|
w3-маржа | Добавляет поле 16px со всех сторон элемента |
w3-margin-top | Добавляет верхнее поле 16px к элементу |
w3-поле-справа | Добавляет правое поле 16px к элементу |
w3-маржа-нижняя | Добавляет нижнее поле 16px к элементу |
w3-поле слева | Добавляет левое поле 16px к элементу |
w3-секция | Добавляет к элементу верхнее и нижнее поле размером 16 пикселей. |
Допуск
Класс w3-margin добавляет отступ в 16 пикселей со всех сторон элемента:
Класс w3-margin добавляет отступ в 16 пикселей со всех сторон элемента.
Пример
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
Маржа Верх
Класс w3-margin-top добавляет к элементу верхнее поле размером 16px:
Класс w3-margin-top добавляет к элементу верхнее поле размером 16 пикселей .
Пример
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
Поле внизу
Класс w3-margin-bottom добавляет к элементу нижнее поле размером 16 пикселей:
Класс w3-margin-bottom добавляет к элементу нижнее поле размером 16 пикселей .
Пример
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
Поле слева
Класс w3-margin-left добавляет к элементу левое поле размером 16 пикселей:
Класс w3-margin-left добавляет к элементу левое поле размером 16 пикселей .
Пример
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
Поле справа
Класс w3-margin-right добавляет к элементу правое поле размером 16px:
Класс w3-margin-right добавляет к элементу правое поле размером 16 пикселей .
Пример
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
Разделы
Многие элементы HTML не имеют верхнего или нижнего поля по умолчанию. Такие элементы будут отображаться без полей между ними:
я синий
я зеленый
Класс w3-section можно использовать для разделения элементов.
Он добавляет 16 пикселей сверху и снизу к любому элементу HTML:
я синий
я зеленый
Пример
<div class="w3-container w3-section w3-blue">
<h1>I am
Blue</h1>
</div>
<div class="w3-container
w3-section
w3-green">
<h1>I am Green</h1>
</div>