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
Браузер выбирает подходящее значение для использования. Например, в некоторых случаях это значение может быть использовано для центрирования элемента.
Начальное значение | как и у каждого из подсвойств этого свойства:
|
---|---|
Применяется к | все элементы, кроме элементов с табличным типом display , отличным от table-caption , table и inline-table . Это также применяется к ::first-letter и ::first-line . |
Наследуется | нет |
Проценты | ссылается на ширину содержащего блока |
Обработка значения | как и у каждого из подсвойств этого свойства:
|
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; }
Specification | Status | Comment |
---|---|---|
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; }
<дел }>
<дел>
Название книги