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

CSS Tutorial

CSS HOME CSS Introduction CSS Syntax CSS How To CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Height/Width CSS Box Model CSS Outline CSS Text CSS Fonts CSS Icons CSS Links CSS Lists CSS Tables CSS Display CSS Max-width CSS Position CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Opacity CSS Navigation Bar CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors CSS Forms CSS Counters CSS Website Layout CSS Units CSS Specificity

CSS Advanced

CSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Gradients CSS Shadows CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Style Images CSS object-fit CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS Box Sizing CSS Flexbox CSS Media Queries CSS MQ Examples

CSS Responsive

RWD Intro RWD Viewport RWD Grid View RWD Media Queries RWD Images RWD Videos RWD Frameworks

CSS Grid

Grid Intro Grid Container Grid Item

CSS Examples

CSS Templates

CSS References

CSS Reference CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support

CSS Margins


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

Поля CSS

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

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


Маржа-отдельные стороны

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

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

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

  • Auto-обозреватель вычисляет маржу
  • length — определяет поле в пикселах, PT, cm и т. д.
  • % — задает поле в% от ширины содержащего элемента
  • Наследование-указывает, что поле должно быть унаследовано от родительского элемента

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

В следующем примере устанавливаются различные поля для всех четырех сторон элемента <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;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px

Пример

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

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

  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

Пример

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

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

  • margin: 25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px

Пример

p {
    margin: 25px 50px;
}

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

  • margin: 25px;
    • all four margins are 25px

Пример

p {
    margin: 25px;
}

Значение Auto

Можно задать для свойства 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;
}

Свернуть маржи

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

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

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

Пример

h1 {
    margin: 0 0 50px 0;
}

h2 {
    margin: 20px 0 0 0;
}

В приведенном выше примере элемент <H1> имеет нижнее поле 50px, а элемент <H2> имеет верхний предел, установленный в 20px.

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



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

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