Общие
Стили полей
Поле — расстояние от рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое. SAVANT.PRO предлагает установку полей по 8 пикселей со всех или любой стороны.
Для установки полей элементов, SAVANT.PRO предоставляет возможность использовать класс .pad
, который устанавливает поля по 8px с каждой стороны элемента.
<p>Установка полей с каждой стороны элемента p</p> <div class="inline border"> <p class="pad without-margin">Дeмонстрационный текст</p> </div>
Установка полей с каждой стороны элемента p
Демонстрационный текст
В данном примере учавствует класс .border
, который мы рассмотрим ниже.
Для создания более точного шаблона вашего сайта SAVANT.PRO предлагает использовать классы .pad-left
, .pad-right
, .pad-top
, .pad-bottom
, .pad-size
, которые устанавливают поля элементов с правой, левой, верхней, нижней и боковых сторон соответственно.
<p>Установка полей слевой стороны элемента p</p> <div class="inline border"> <p class="pad-left without-margin">Дeмонстрационный текст</p> </div>
<p>Установка полей справой стороны элемента p</p> <div class="inline border"> <p class="pad-right without-margin">Дeмонстрационный текст</p> </div>
<p>Установка полей сверхней стороны элемента p</p> <div class="inline border"> <p class="pad-top without-margin">Дeмонстрационный текст</p> </div>
<p>Установка полей снижней стороны элемента p</p> <div class="inline border"> <p class="pad-bottom without-margin">Дeмонстрационный текст</p> </div>
<p>Установка полей с боковых сторон элемента p</p> <div class="inline border"> <p class="pad-side without-margin">Дeмонстрационный текст</p> </div>
Установка полей слевой стороны элемента p
Демонстрационный текст
Установка полей справой стороны элемента p
Демонстрационный текст
Установка полей сверхней стороны элемента p
Демонстрационный текст
Установка полей снижней стороны элемента p
Демонстрационный текст
Установка полей с боковых сторон элемента p
Демонстрационный текст
Стили отступов
Отступом — является пространство от границы текущего элемента до внутренней границы его родительского элемента.
Класс .margin
устанавливает отступ 8px с каждой стороны элемента.
<p>Отступ 8px с каждой стороны элемента div</p> <div class="margin inline border"> <p class="without-margin">Дeмонстрационный текст</p> </div>
Отступ 8px с каждой стороны элемента div
Демонстрационный текст
Если необходима точная настройка отступов, SAVANT.PRO предлагает использовать стили .margin-right
, .margin-left
, .mergin-top
, .margin-bottom
, .margin-side
, которые устанавливают отступ с правой, левой, верхней, нижней и боковых сторон элемента равный 8px.
<p>Отступ 8px слевой стороны элемента div</p> <div class="margin-left inline border"> <p class="without-margin">Дeмонстрационный текст</p> </div>
<p>Отступ 8px справой стороны элемента div</p> <div class="margin-right inline border"> <p class="without-margin">Дeмонстрационный текст</p> </div>
<p>Отступ 8px сверхней стороны элемента div</p> <div class="margin-top inline border"> <p class="without-margin">Дeмонстрационный текст</p> </div>
<p>Отступ 8px снижней стороны элемента div</p> <div class="margin-top inline border"> <p class="without-margin">Дeмонстрационный текст</p> </div>
<p>Отступ 8px с боковых сторон элемента div</p> <div class="margin-side inline border"> <p class="without-margin">Дeмонстрационный текст</p> </div>
Отступ 8px слевой стороны элемента div
Демонстрационный текст
Отступ 8px справой стороны элемента div
Демонстрационный текст
Отступ 8px сверхней стороны элемента div
Демонстрационный текст
Отступ 8px снижней стороны элемента div
Демонстрационный текст
Отступ 8px с боковых сторон элемента div
Демонстрационный текст
Стили границ
SAVANT.PRO предлагает использовать границы #ccc
цвета и имеющие ширину в 1 пиксел. Границы можно задать с любой стороны, а так же вокруг всего элемента. Для этого используются классы .border
, .border-left
, .border-right
, .border-top
, .border-bottom
.
<p>Границы с каждой стороны элемента div</p> <div class="border inline"> <p class="without-margin">Дeмонстрационный текст</p> </div>
<p>Границы слевой стороны элемента div</p> <div class="border-left inline"> <p class="without-margin">Дeмонстрационный текст</p> </div>
<p>Границы справой стороны элемента div</p> <div class="border-right inline"> <p class="without-margin">Дeмонстрационный текст</p> </div>
<p>Границы сверхней стороны элемента div</p> <div class="border-top inline"> <p class="without-margin">Дeмонстрационный текст</p> </div>
<p>Границы снижней стороны элемента div</p> <div class="border-bottom inline"> <p class="without-margin">Дeмонстрационный текст</p> </div>
Границы с каждой стороны элемента div
Демонстрационный текст
Границы слевой стороны элемента div
Демонстрационный текст
Границы справой стороны элемента div
Демонстрационный текст
Границы сверхней стороны элемента div
Демонстрационный текст
Границы снижней стороны элемента div
Демонстрационный текст