Отступы CSS

Рекомендуемый курс:

Попробуйте сами

Отступы CSS

Отступы этого элемента равны 70px. margin CSS

Свойство используется для создания пространства вокруг элемента внеdefined рамки.

Через CSS, Вы можете полностью контролировать отступы.有一些属性 можно использовать для установки отступов для каждой стороны элемента (верх, правый, нижний и левый).

Margin - отдельные стороны

  • Свойство является кратким свойством следующих внешних отступов:
  • margin-top
  • margin-right
  • margin-bottom

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

  • Все свойства внешних отступов могут быть установлены следующие значения:
  • auto - браузер рассчитает отступы length
  • - указать отступы в единицах измерения px, pt, cm и т.д.
  • % - указать отступы в процентах от ширины содержимого элемента

inherit - указать, что отступы должны быть继承自父 элементаСовет:

Пример

Разрешены отрицательные значения.

p {
  Установите разные внешние отступы для всех четырех сторон элемента <p>:
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
}

Попробуйте сами

margin-left: 80px;

Margin - краткое свойство

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

  • Свойство является кратким свойством следующих внешних отступов:
  • margin-top
  • margin-right
  • margin-bottom

margin-left

Если margin Механизм работы是这样的:

  • margin краткое свойство установлено четыре значения:
    • Свойство установило три значения:
    • Свойство имеет четыре значения:
    • Верхний внешний отступ равен 25px
    • Правый внешний отступ равен 50px

Пример

Левый внешний отступ равен 100px

p {
  margin краткое свойство установлено четыре значения:
}

Попробуйте сами

Если margin margin: 25px 50px 75px;

  • Используйте краткое свойство margin с тремя значениями:
    • Свойство установило три значения:
    • Правый и левый внешние отступы равны 50px
    • Верхний внешний отступ равен 25px

Пример

Нижний внешний отступ равен 75px

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

Попробуйте сами

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

  • margin: 25px 50px;
    • Верхние и нижние внешние отступы равны 25px
    • Правый и левый внешние отступы равны 50px

Пример

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

p {
  margin: 25px 50px;
}

Попробуйте сами

Если margin Свойство установило значение:

  • margin: 25px;
    • Все четыре внешние отступы равны 25px

Пример

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

p {
  margin: 25px;
}

Попробуйте сами

auto значение

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

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

Пример

Использование margin: 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;
}

Попробуйте сами

Дополнительное чтение

Дополнительная литература:Блок-модель: отступы CSS