ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

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

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

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

CSS3. Уроки для начинающих

CSS Поля


Этот элемент имеет поле (край) в 70 пикселей.
Попробуйте сами »

CSS Margin - Поля

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

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


Поля - Отдельные стороны

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

  • margin-top - поле сверху
  • margin-right - поле справа
  • margin-bottom - поле снизу
  • margin-left - поле слева

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

  • auto (автоматически) - браузер сам определяет края
  • length (длина) - указывает на разницу в 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 имеет четыре значения:

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

Пример

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

p {
  margin: 25px 50px 75px 100px;
}
Попробуйте сами »

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

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

Пример

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

p {
  margin: 25px 50px 75px;
}
Попробуйте сами »

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

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

Пример

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

p {
  margin: 25px 50px;
}
Попробуйте сами »

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

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

Пример

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

p {
  margin: 25px;
}
Попробуйте сами »

Значение auto

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

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

Пример

Используйте поле auto:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
Попробуйте сами »

Значение inherit (наследования)

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

Пример

Используйте значение inherit:

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

p.ex1 {
  margin-left: inherit;
}
Попробуйте сами »

Сворачивание полей

Верхние и нижние поля элементов иногда сворачиваются в одно поле, равное наибольшему из двух полей.

Этого не происходит на левом и правом полях! Можно свернуть только верхние и нижние поля!

Посмотрите на следующий пример:

Пример

Демонстрация сворачивания полей:

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}
Попробуйте сами »

В приведенном выше примере элемент <h1> имеет нижнее поле 50 пикселей, а элемент <h2> имеет верхнее поле 20 пикселей.

Казалось бы, здравый смысл подсказывает, что вертикальная граница между <h1> и <h2> будет в общей сложности 70px (50px + 20px). Но из-за сворачивания полей фактическое поле в итоге составляет 50px.


Проверьте себя с помощью упражнений!


Все CSS свойства полей

Свойство Описание
margin Сокращенное свойство для установки свойств полей в одном объявлении
margin-bottom Устанавливает нижнее поле элемента
margin-left Устанавливает левое поле элемента
margin-right Устанавливает правое поле элемента
margin-top Устанавливает верхнее поле элемента