Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS CSS-фоны CSS границы CSS поля CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS CSS-текст CSS-шрифты CSS-иконки CSS-ссылки CSS-списки CSS-таблицы Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

CSS поля


Поля используются для создания пространства вокруг элементов за пределами любых определенных границ.


Этот элемент имеет поле 70px.

CSS поля

Свойства CSS marginиспользуются для создания пространства вокруг элементов за пределами любых определенных границ.

С CSS у вас есть полный контроль над полями. Существуют свойства для установки полей для каждой стороны элемента (сверху, справа, снизу и слева).


Поле — отдельные стороны

В CSS есть свойства для указания поля для каждой стороны элемента:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Все свойства поля могут иметь следующие значения:

  • auto - браузер вычисляет маржу
  • длина — указывает поле в px, pt, cm и т. д.
  • % - указывает поле в % от ширины содержащего элемента
  • inherit — указывает, что поле должно быть унаследовано от родительского элемента

Совет: допускаются отрицательные значения.

Пример

Установите разные поля для всех четырех сторон элемента <p>:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}


Маржа — сокращенное свойство

Чтобы сократить код, можно указать все свойства полей в одном свойстве.

Свойство marginявляется сокращенным свойством для следующих отдельных свойств поля:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Итак, вот как это работает:

Если marginсвойство имеет четыре значения:

  • поля: 25px 50px 75px 100px;
    • верхнее поле 25px
    • правое поле 50px
    • нижнее поле 75px
    • левое поле 100px

Пример

Используйте сокращенное свойство margin с четырьмя значениями:

p {
  margin: 25px 50px 75px 100px;
}

Если marginсвойство имеет три значения:

  • поля: 25px 50px 75px;
    • верхнее поле 25px
    • правое и левое поля 50px
    • нижнее поле 75px

Пример

Используйте сокращенное свойство margin с тремя значениями: 

p {
  margin: 25px 50px 75px;
}

Если marginсвойство имеет два значения:

  • поля: 25px 50px;
    • верхнее и нижнее поля 25px
    • правое и левое поля 50px

Пример

Используйте сокращенное свойство margin с двумя значениями: 

p {
  margin: 25px 50px;
}

Если marginсвойство имеет одно значение:

  • поле: 25 пикселей;
    • все четыре поля 25px

Пример

Используйте сокращенное свойство margin с одним значением: 

p {
  margin: 25px;
}

Автоматическое значение

Вы можете установить свойство margin autoдля горизонтального центрирования элемента внутри его контейнера.

Затем элемент займет указанную ширину, а оставшееся пространство будет разделено поровну между левым и правым полями.

Пример

Использовать маржу: авто:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

Наследуемое значение

В этом примере левое поле элемента <p class="ex1"> наследуется от родительского элемента (<div>):

Пример

Использование наследуемого значения:

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}