Автоматические горизонтальные отступы css: margin-top — CSS | MDN

margin — CSS | MDN

CSS свойство margin определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top, margin-right, margin-bottom и margin-left.

Данное свойство является сокращением для следующих CSS свойств:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
/* Применяется ко всем четырём сторонам */
margin: 1em;
margin: -3px;
/* по вертикали | по горизонтали */
margin: 5% auto;
/* сверху | горизонтально | снизу */
margin: 1em auto 2em;
/* сверху | справа | снизу | слева */
margin: 2px 1em 0 auto;
/* Глобальные значения */
margin: inherit;
margin: initial;
margin: unset;

Свойство margin может быть задано с использованием одного, двух, трёх или четырёх значений. Каждое значение имеет тип <length>

, <percentage> или является ключевым словом auto. Каждое значение может быть положительным, отрицательным или равным нулю.

  • Когда определено одно значение, такое значение определено для всех четырёх сторон.
  • Когда определены два значения, то первое значение определяет внешний отступ для верхней и нижней стороны, а второе значение определяет отступ для левой и правой стороны.
  • Когда определены три значение, то первое значение определяет внешний отступ для верхней стороны, второе значение определяет внешний отступ для левой и правой стороны, а третье значение определяет отступ для нижней стороны.
  • Когда определены четыре значения, они определяют внешние отступы для верхней стороны,
    справа
    , снизу и слева в рассмотренном порядке (по часовой стрелке).

Значения

length

Размер отступа как фиксированное значение.

percentage

Размер отступа в процентах относительно ширины родительского блока.

auto

Браузер выбирает подходящее значение для использования. Например, в некоторых случаях это значение может быть использовано для центрирования элемента.

Начальное значениекак и у каждого из подсвойств этого свойства:
  • margin-bottom: 0
  • margin-left: 0
  • margin-right: 0
  • margin-top
    : 0
Применяется квсе элементы, кроме элементов с табличным типом display, отличным от table-caption, table и inline-table. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Процентыссылается на ширину содержащего блока
Обработка значениякак и у каждого из подсвойств этого свойства:
  • margin-bottom: процент, как указан, или абсолютная длина
  • margin-left: процент, как указан, или абсолютная длина
  • margin-right: процент, как указан, или абсолютная длина
  • margin-top: процент, как указан, или абсолютная длина
Animation typeдлина
margin = 
<'margin-top'>{1,4}
(en-US)

Простой пример

HTML
<div>Этот элемент отцентрирован. </div>
<div>Этот элемент расположен за пределами своего контейнера.</div>
CSS
.center {
  margin: auto;
  background: lime;
  width: 66%;
}
.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

Больше примеров

margin: 5%;                 /* все стороны:  отступ 5% */
margin: 10px;               /* все стороны:  отступ 10px */
margin: 1.6em 20px;         /* верх и низ:   отступ 1.6em */
                            /* право и лево: отступ 20px */
margin: 10px 3% 1em;        /* верх:         отступ 10px */
                            /* право и лево: отступ 3% */
                            /* низ:          отступ 1em */
margin: 10px 3px 30px 5px;  /* верх:   отступ 10px */
                            /* право:  отступ 3px */
                            /* низ:    отступ 30px */
                            /* лево:   отступ 5px */
margin: 2em auto;           /* верх и низ: отступ 2em */
                            /* блок отцентрирован горизонтально */
margin: auto;               /* верх и низ: отступ 0 */
                            /* блок отцентрирован горизонтально */

Горизонтальное выравнивание

Чтобы центрировать что-то горизонтально в современных браузерах, вы можете использовать display: flex; justify-content: center; .

Однако в старых браузерах, таких как IE8-9, которые не поддерживают технологию Flexible Box, они недоступны. Чтобы центрировать элемент внутри своего родителя, используйте margin: 0 auto; .

Схлопывание отступов

Иногда внешние отступы (margins) для верхней и нижней сторон схлопываются в один отступ, который равен наибольшему из двух отступов. Смотри Схлопывание внешних отступов для получения большей информации.

Specification
CSS Box Model Module Level 3
# margin

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • Введение в базовую блочную модель CSS
  • Схлопывание отступов
  • margin-top, margin-right, margin-bottom и margin-left
  • Логические свойства: margin-block-start (en-US), margin-block-end (en-US), margin-inline-start и margin-inline-end. А так же сокращенные варианты: margin-block (en-US) и margin-inline (en-US)

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

margin-top — CSS | MDN

Свойство margin-top CSS определяет внешний отступ в верхней части элемента. Положительное значение поместит элемент дальше от соседних элементов, чем обычно, а отрицательное значение поместит его ближе.

Это свойство не имеет эффекта на незамещаемых (non-replaced) строковых (inline) элементах, таких как <span> или <code>.

/* значения <length> */
margin-top: 10px;  /* абсолютное значение */
margin-top: 1em;   /* относительно размера текста */
margin-top: 5%;    /* относительно ширины ближайшего контейнера */
/* ключевые слова */
margin-top: auto;
/* глобальные значения */
margin-top: inherit;
margin-top: initial;
margin-top: unset;

Свойство margin-top может принимать значение auto, <length> или <percentage>. Эти значения могут быть положительные, отрицательные или равны нулю.

Значения

<length>

Значение margin является фиксированной величиной

<percentage>

Значение margin выражается в процентах по отношению к ширине блока, содержащего элемент.

auto

Браузер выбирает подходящее значение для использования. Смотри margin.

Формальный синтаксис

margin-top =
<length-percentage> | (en-US)
auto

"><length-percentage> =
<length> | (en-US)
<percentage>

.content { margin-top:   5%; }
.sidebox { margin-top: 10px; }
.logo    { margin-top: -5px; }
#footer  { margin-top:  1em; }
SpecificationStatusComment
CSS Box Model
Определение ‘margin-top’ в этой спецификации.
Кандидат в рекомендацииНикаких существенных изменений
CSS Transitions
Определение ‘margin-top’ в этой спецификации.
Рабочий черновикОпределяет margin-top как анимационный.
CSS Level 2 (Revision 1)
Определение ‘margin-top’ в этой спецификации.
РекомендацияУстраняет его влияние на строковые (inline) элементы.
CSS Level 1
Определение ‘margin-top’ в этой спецификации.
РекомендацияНачальное определение
Начальное значение0
Применяется квсе элементы, кроме элементов с табличным типом display, отличным от table-caption, table и inline-table. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Процентыссылается на ширину содержащего блока
Обработка значенияпроцент, как указан, или абсолютная длина
Animation typeдлина

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

css reset — Как заставить работать padding:auto в CSS?

спросил

Изменено 4 года назад

Просмотрено 179 тысяч раз

Я работаю над устаревшим проектом, в котором есть сброс CSS с помощью *{ margin:0; padding:0 } применяется ко всему. Теперь моему новому коду это не нужно, поскольку он основан на Normalize.css. Это не было большой проблемой, но в некоторых местах мне нужно использовать оба стиля.

Как сбросить настройки CSS? Я смог сделать * {margin: auto} , и это работает нормально. То же самое не верно в отношении заполнения. Есть ли эквивалентный способ сбросить padding. Как вы собираетесь решать эту проблему?

  • css
  • css-сброс

4

auto не является допустимым значением свойства padding , единственное, что вы можете сделать, это убрать padding: 0; из 9Объявление 0011 * , иначе просто назначьте дополнение соответствующему блоку свойств.

Если удалить отступ : 0; from * {} , чем браузер будет применять стили по умолчанию к вашим элементам, что даст вам неожиданное смещение позиционирования в разных браузерах на несколько пикселей, поэтому лучше назначить padding: 0; , используя * , а затем, если вы хотите переопределить заполнение, просто используйте другое правило, например

 . container p {
   отступ: 5px;
}
 

2

Самое простое поддерживаемое решение — использовать поля

 .element {
  дисплей: блок;
  поле: 0px авто;
}
 

Или используйте второй контейнер вокруг элемента, к которому применено это поле. Это несколько повлияет на заполнение : 0px auto , если оно существовало.

CSS

 .element_wrapper {
  дисплей: блок;
  поле: 0px авто;
}
.элемент {
  фон: синий;
}
 

HTML

 
<дел> Привет, мир

1

Вы должны просто ограничить свой * селектор определенными областями, которые нуждаются в сбросе. .legacy * { } и т. д.

1

Вы можете сбросить отступы (и я думаю все остальное) с начальным по умолчанию.

 р {
    заполнение: начальное;
}
 

, если вы хотите сбросить ВСЕ, тогда ответ @Björn должен быть вашей целью, но применяется как:

 * {
  заполнение: начальное;
}
 

, если он загружается после исходного файла reset.css, он должен иметь тот же вес и будет полагаться на заполнение по умолчанию для каждого браузера в качестве начального значения.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

CSS Grid padding справа от последнего элемента при горизонтальной прокрутке с помощью grid-auto-flow: column;

Задавать вопрос

спросил

Изменено 1 год, 6 месяцев назад

Просмотрено 781 раз

Заполнение справа не отображается справа от последнего элемента. Как мне сделать так, чтобы он отображался слева от первого элемента.

Отступ слева от первого элемента

Отступ справа от последнего элемента (отступ справа есть, но он не дает места справа от последнего элемента

 .Контейнер {
  максимальная ширина: 800 пикселей;
  поле: 0 авто;
}
.Список книг {
  переполнение: прокрутка;
  отображение: сетка;
  сетка-автопоток: столбец;
  зазор сетки: 8px;
  отступ: 0 8px 16px 8px;
}
.список книг div{
  ширина: 100 пикселей;
  высота: 140 пикселей;
  граница: 1px сплошная #333;
} 
 <дел }>
  <дел>
    Название книги
  
<дел> Книга 1
<дел> Название книги