Margin 0: margin-top — CSS | MDN

Значения

• <length>
  • : Размер отступа — фиксированная величина.
• <percentage>
  • : Размер отступа в процентах — размер относительно длины родительского блока.
• auto

  • : Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные:	Значение display	Значение float	Значение position	Расчётное значение auto	Комментарий
    inline, inline-block, inline-table	любое	static или relative	0	Строчный способ разметки
    block, inline, inline-block, block, table, inline-table, list-item, table-caption	любое	static или relative	0, кроме случаев, когда margin-left и margin-right установлены как auto. В этом случае устанавливается значение, центрирующее элемент внутри его родителя	Блочный способ разметки
    block, inline, inline-block, block, table, inline-table, list-item, table-caption	left или right	static или relative	0	Блочный способ разметки (плавающие элементы)
    любое table-*, кроме table-caption	любое	любое	0	Внутренние table-* элементы не имеют отступов, вместо этого используйте border-spacing (en-US)
    любое, кроме flex, inline-flex, или table-*	любое	fixed или absolute	0, кроме случаев, когда margin-left и margin-right установлены как auto. В этом случае, устанавливается значение центрирующее границы области внутри доступной width (ширины), если значение фиксировано.	Способ разметки абсолютным позиционированием
    flex, inline-flex	любое	любое	0, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным auto отступам.	Способ разметки с помощью flexbox

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

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

. content { margin-right: 5%; }
.sidebox { margin-right: 10px; }
.logo    { margin-right: -5px; }

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 7 нояб. 2022 г. by MDN contributors.

margin-inline — CSS: Каскадные таблицы стилей

Свойство CSS margin-inline — это сокращенное свойство, которое определяет как логические встроенные начальные, так и конечные поля элемента, которые сопоставляются с физическими полями в зависимости от размера элемента. режим письма, направленность и ориентация текста.

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

• margin-inline-start
• поле-встроенный-конец

 /* <длина> значения */
встроенное поле: 10px 20px; /* Абсолютная длина */
маржа встроенная: 1em 2em; /* относительно размера текста */
встроенная маржа: 5% 2%; /* относительно ширины ближайшего блочного контейнера */
встроенное поле: 10px; /* устанавливает начальное и конечное значения */
/* Значения ключевых слов */
маржа встроенная: авто;
/* Глобальные значения */
маржа встроенная: наследовать;
маржа встроенная: начальная;
маржа встроенная: вернуться;
маржа встроенная: обратный слой;
маржа встроенная: не установлена;
 

Это свойство соответствует margin-top и margin-bottom или свойства margin-right и margin-left , в зависимости от значений, определенных для write-mode , direction и text-orientation 900 05 .

Свойство margin-inline может быть указано с использованием одного или двух значений.

• Когда указано одно значение , к применяется одинаковое поле как в начале, так и в конце .
• Когда указаны два значения , первое поле относится к start , второе к end .

Значения

Свойство margin-inline принимает те же значения, что и свойство margin .

 margin-inline = 
 <'margin-top'>{1,2 } 

Установка встроенных начального и конечного полей

CSS

 раздел {
  цвет фона: желтый;
  ширина: 120 пикселей;
  высота: авто;
  граница: 1px сплошной зеленый;
}
п {
  маржа: 0;
  встроенное поле: 20px 40px;
  цвет фона: коричневый;
}
. verticalExample {
  режим письма: вертикальный-rl;
}
 

HTML

 

  
Пример текста

<дел>
  
Пример текста