Margin css: margin-left — CSS | MDN

margin — CSS | MDN

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

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

<div>
  <div>
    <div>
      <div>margin: 0</div>
    </div>
    <div>
      <div>margin: 1em</div>
    </div>
    <div>
      <div>margin: 5% auto</div>
    </div>
    <div>
      <div>margin: 1em auto 2em</div>
    </div>
    <div>
      <div>margin: 5px 1em 0 auto</div>
    </div>
    <div>Все вышеприведённые блоки имеют одинаковую ширину 50%</div>
  </div>
</div>

html,body {
  height: 100%;
  box-sizing: border-box;
}
. grid {
  width: 100%;
  height: 100%;
  display: flex;
  background: #EEE;
  font: 1em monospace;
}
.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
}
.cell {
  box-sizing: border-box;
  margin: .5em;
  padding: 0;
  background-color: #FFF;
  overflow: hidden;
  text-align: center;
}
.note {
  background: #fff3d4;
  padding: 1em;
  margin: .5em;
  font: .8em sans-serif;
  text-align: center;
  flex: none;
}
.m {
  display: block;
  width: 50%;
  text-align: left;
  background: #E4F0F5;
  padding: .5em;
  border: 1px solid;
}
.m0 { margin: 0; }
.m1 { margin: 1em; }
.m2 { margin: 5% auto; }
.m3 { margin: 1em auto 2em; }
.m4 { margin: 5px 1em 0 auto; }

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

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

Значения

length

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

percentage

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

auto

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

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

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
Unknown specification # margin

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

• CSS Box Model
• Схлопывание отступов

Last modified: 13 авг. 2022 г., by MDN contributors

Margins внешние отступы CSS уроки для начинающих академия

HTML5CSS.ru

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

❮ Назад Дальше ❯

---

Этот элемент имеет поле 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;
}

---

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

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

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

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

Пример

h2 {
    margin: 0 0 50px 0;
}

h3 {
    margin: 20px 0 0 0;
}

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

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

---

---

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

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

❮ Назад Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

---

---

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

Свойство margin | Учебные курсы

Свойство margin устанавливает пустое пространство от внешнего края border, padding или содержимого блока (рис. 1). Под margin нет своего фона и он принимает фон родительского элемента.

Рис. 1. margin

margin в основном используется для создания вертикальных и горизонтальных отступов между элементами. Аналогично другим блочным свойствам есть свойства для каждой стороны — margin-top, margin-right, margin-bottom и margin-left, соответственно устанавливающие отступ сверху, справа, снизу и слева. В примере 1 пространство между двумя вертикальными блоками задаётся с помощью свойства margin-bottom.

Пример 1. Расстояние между блоков

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin</title> <style> .block { background: #B08874; /* Цвет фона */ color: #fff; /* Цвет текста */ padding: 1rem; /* Поля вокруг содержимого */ margin-bottom: 1rem; /* Расстояние снизу */ } </style> </head> <body> <div>Первый блок</div> <div>Второй блок</div> </body> </html>

Результат данного примера показан на рис. 2.

Рис. 2. Расстояние между блоков

Значения margin

В качестве значений margin используются любые допустимые единицы длины, к примеру, пиксели, проценты, em, rem и др. В отличие от padding свойство margin может быть отрицательным (например: -10px), а также принимать значение auto. В остальном margin похоже на padding, у него также может быть от одного до четырёх значений.

Одно значение — определяет отступы для всех сторон блока.

margin: все стороны;
margin: 10px;

Два значения — первое определяет отступы сверху и снизу для элемента, второе слева и справа для элемента.

margin: верх-низ лево-право;
margin: 10px 20px;

Три значения — первое задаёт отступ сверху для элемента, второе одновременно слева и справа, а третье снизу.

margin: верх лево-право низ;
margin: 10px 20px 5px;

Четыре значения — первое определяет отступ сверху, второе справа, третье снизу, четвёртое слева. Для запоминания последовательности можно представить часы — значения идут по часовой стрелке, начиная с 12 часов.

margin: верх право низ лево;
margin: 5px 10px 15px 20px;

Значение auto

Свойство margin позволяет выравнивать элемент по центру горизонтали, если использовать значение auto и задать ширину элемента через width (пример 1).

Пример 2. Значение auto

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin</title> <style> .dialog { width: 80%; /* Ширина блока */ background: #D4E3A5; /* Цвет фона */ border: 2px solid #7D9B3D; /* Параметры рамки */ padding: 1rem; /* Поля */ margin: auto; /* Выравниваем по центру */ } </style> </head> <body> <div> Полинезийцы называют Млечный путь Манго-Роа-И-Ата, что в переводе с маори означает «Длинная акула на рассвете». </div> </body> </html>

Результат данного примера показан на рис. 3.

Рис. 3. Выравнивание блока по центру

Вместо margin: auto можно использовать комбинацию margin-left: auto и margin-right: auto.

Выравнивание блока по центру через значение auto работает только в сочетании с width.

Аналогично можно выровнять по центру горизонтали изображение, для этого даже не надо указывать ширину картинки, поскольку браузер получает её автоматически. Следует только превратить изображение в блочный элемент через свойство display, как показано в примере 3.

Пример 3. Значение auto

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin</title> <style> .center { display: block; /* Блочный элемент */ margin: auto; /* Выравниваем по центру */ } </style> </head> <body> <img src=»image/html-128.png» alt=»HTML5″> </body> </html>

Результат данного примера показан на рис. 4.

Рис. 4. Выравнивание картинки по центру

Проценты

В качестве значения margin можно использовать процентную запись, с которой связаны следующие особенности.

• По горизонтали проценты считаются от ширины всего блока.
• По вертикали проценты считаются от ширины всего блока.

Таким образом, margin в процентах берётся от ширины всего блока, даже для margin-top и margin-botom.

Отрицательный margin

margin может быть задан с отрицательным значением, тем самым элемент сдвигается в противоположном направлении. К примеру, margin-top:-10px поднимает блок вверх на 10 пикселей, а margin-left:-10px сдвигает блок влево.

В примере 4 показан сдвиг блока с классом stat вверх, если он располагается сразу после элемента <p>.

Пример 4. Использование отрицательного значения

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin</title> <style> p + .stat { margin-top: -1rem; /* Поднимаем текст вверх */ } .stat { font-size: 3rem; /* Размер текста */ } </style> </head> <body> <p>Продано ёлок</p> <p>64</p> </body> </html>

Результат данного примера показан на рис. 5. Без отрицательного margin строки располагаются далеко друг от друга.

Рис. 5. Поднимаем блок вверх через margin-top

Обнуление margin

Для некоторых элементов браузер добавляет margin автоматически. Вот несколько примеров:

• для <body> по умолчанию margin задан как 8px;
• для списков <ul>, <ol>, <dl> margin-top и margin-bottom заданы как 1em;
• для <blockquote> и <figure> margin-left и margin-right заданы как 40px.

Эти margin, согласно макету, не всегда нужны, поэтому их можно обнулить, иными словами, задать для margin нулевое значение. В примере 5 показано обнуление margin для элемента <body>, после чего элемент <header> плотно прилегает к краям браузера.

Пример 5. Обнуление margin

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin</title> <style> body { margin: 0; /* Обнуляем */ } header { background: #D4E3A5; /* Цвет фона */ padding: 1em; /* Поля вокруг текста */ } </style> </head> <body> <header><h2>Кря-кря</h2></header> </body> </html>

Результат данного примера показан на рис. 6.

Рис. 6. Обнуление margin у <body>

См. также

• margin
• margin в CSS
• Абсолютное позиционирование
• Блочные элементы
• Выравнивание с помощью флексбоксов
• Колесо для сокращённых свойств
• Открываем блочную модель
• Строчные элементы
• Схлопывающиеся margin

margin | CSS справочник

Поддержка браузерами

12.0+	6.0+	1.0+	1.0+	3.5+	1.0+

Описание

CSS свойство margin определяет расстояние по вертикали и/или горизонтали (его также называют «внешний отступ» или «поле») от внешнего края рамки текущего элемента до внутренней границы родительского элемента или до внешнего края элемента, который расположен рядом с текущим элементом.

Свойство margin обеспечивает краткий метод установки значений сразу нескольких свойств внешнего отступа в одном объявлении. Оно может содержать от одного до четырех значений, разделяемых между собой пробелами. Если указывается более одного значения, внешний отступ устанавливается начиная с верхней позиции:

Визуальный эффект будет зависеть от количества заданных значений:

• margin:10px 5px 15px 20px;
  • Верхнее поле — 10px
  • Правое поле — 5px
  • Нижнее поле — 15px
  • Левое поле — 20px
• margin:10px 5px 15px;
  • Верхнее поле — 10px
  • Правое и левое поле — 5px
  • Нижнее поле — 15px
• margin:10px 5px;
  • Верхнее и нижнее поле — 10px
  • Правое и левое поле — 5px
• margin:10px;
  • Все 4 поля по 10px

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

Объединение вертикальных полей

1. Поля сестринских элементов расположенных друг под другом и находящихся в потоке документа объединяются в одно общее. Высота полученного поля равняется высоте большего из двух полей, например: поле верхнего элемента (margin-bottom) составляет 10px, а нижнего элемента (margin-top) — 20px, единое поле в этом случае будет высотой 20px.
2. Объединение полей родительского и дочернего элемента находящихся в потоке документа происходит, если родительский элемент не имеет ничего из того, что могло бы отделять его внешний отступ от внешнего отступа дочернего элемента (рамки, внутреннего отступа или строчного содержимого). Также объединение полей не будет происходить, если родительскому элементу установить свойство overflow со значением hidden или auto. Плюс от этого способа заключается в том, что размер родительского элемента не увеличивается.

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

Примечание: допускаются отрицательные значения полей.

Значение по умолчанию:	0
Применяется:	ко всем элементам, за исключением тех элементов, которые относятся к типу display: table-*, кроме table-caption, table и inline-table. Дополнительно: значения относящиеся к margin-top и margin-bottom не применяются к строчным элементам.
Анимируется:	да
Наследуется:	нет
Версия:	CSS1
Синтаксис JavaScript:	object.style.margin=»10px 5px»

Синтаксис

margin: величина|auto|inherit;

Значения свойства

Значение	Описание
auto	для вертикальных отступов вычисляется как 0. При использовании для горизонтальных отступов следует учитывать следующие моменты: данное значение применяется только к блочным элементам, которые имеют фиксированную ширину при использовании значения auto, элемент сдвигается полностью влево или вправо, если значение одновременно установлено для отступа слева и справа, элемент будет центрирован по горизонтали.
величина	Указывает размер поля в единицах измерения, используемых в CSS.
%	Величина, указанная в процентах, вычисляется в зависимости от ширины области содержимого родительского элемента.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

margin:

auto

10px

25px

50px

100px

10%

20%

10px 1px 15px 50px

10px 1px

div#myBox {
background-color: red;
margin: auto;
}

CSS :: Свойство margin

Сокращенное css-свойство margin (от англ. margin – поле страницы) используется для установки внешних отступов (полей) элемента в одном объявлении, позволяя задавать поля как для отдельных, так и сразу для всех сторон элемента.

Под внешним отступом элемента подразумевается расстояние от границы (стороны) текущего элемента до соответствующей границы (стороны) родительского элемента либо до соответствующей границы (стороны) соседнего элемента (см. рисунок №1).

Рис №1. Общая схема элемента

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

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

Большинство браузеров по умолчанию устанавливает для элемента «body» внешние отступы отличные от нуля (обычно это 8px), которые отсчитываются относительно края окна браузера. Их можно убрать, задав для тела документа значение margin равное нулю.

• размер – принимаются любые единицы измерения (смотреть), используемые в CSS. Разрешаются как положительные, так и отрицательные значения.
• проценты – величина внешнего отступа в процентах, которые рассчитываются относительно ширины области содержимого родительского элемента. Разрешаются как положительные, так и отрицательные значения.
• auto – внешние отступы устанавливаются браузером автоматически.

При этом разрешается указывать через пробел одно, два, три или четыре значения:

• одно значение – внешние отступы задаются для всех четырех сторон элемента;
• два значения – первое значение задает внешние отступы для верхней и нижней сторон элемента, второе – правой и левой;
• три значения – первое значение задает внешние отступы для верхней стороны элемента, второе – для правой и левой, третье – для нижней стороны элемента;
• четыре значения – внешние отступы устанавливается по часовой стрелке: для верхней стороны, затем правой, нижней и левой.

Официальный сайт W3C: https://drafts.csswg.org/css-box-3/#margin

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/margin

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	<style>
		/* Прием предварительного обнуления */
		/* всех отступов у всех элементов */		
		*{
		margin: 0;		  
		padding: 0;		  
		outline: 0;		  
		}
		p{
		width: 500px;
		border: solid 2px green;
		}
		/* Внешние и внутренние отступы в одном объявлении */
		.all_in_one{
		margin: 50px 0px 50px 100px;
		padding: 20px 10px 20px 10px;
		}		
		/* Внешние и внутренние отступы по отдельности */
		.separate{
		margin-top: 50px;
		margin-right: 0px;        
		margin-bottom: 50px;		
		margin-left: 100px;
		padding-top: 20px;
		padding-right: 10px;        
		padding-bottom: 20px;		
		padding-left: 10px;
		}
	 
	</style>
	
</head>
<body>
	<p>
		Внешние и внутренние отступы в одном объявлении<br>
		margin: 50px 0px 50px 100px;<br>
		padding: 20px 10px 20px 10px;        
	</p>
	<p>
		Тоже самое, но по отдельности<br>
		margin-top: 50px;<br>
		margin-right: 0px;<br>        
		margin-bottom: 50px;<br>		
		margin-left: 100px;<br><br>
		padding-top: 20px;<br>
		padding-right: 10px;<br>        
		padding-bottom: 20px;<br>		
		padding-left: 10px;        
	</p>	
</body>
</html>

Пример №1

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №2</title>
	<style>
		p{
		width: 500px;
		border: solid 2px green;
		}
		/* Отступы в процентах в одном объявлении */
		. all_in_one{
		margin: 10%;
		padding: 5%;
		}		
		/* Отступы в процентах по отдельности */
		.separate{
		margin-top: 10%;
		margin-right: 10%;        
		margin-bottom: 10%;		
		margin-left: 10%;
		padding-top: 5%;
		padding-right: 5%;        
		padding-bottom: 5%;		
		padding-left: 5%;
		}
	 
	</style>
	
</head>
<body>
	<p>
		Отступы в процентах в одном объявлении<br>
		margin: 10%;<br>
		padding: 5%;        
	</p>
	<p>
		Тоже самое, но по отдельности<br>
		margin-top: 10%;<br>
		margin-right: 10%;<br>        
		margin-bottom: 10%;<br>		
		margin-left: 10%;<br><br>
		padding-top: 5%;<br>
		padding-right: 5%;<br>        
		padding-bottom: 5%;<br>		
		padding-left: 5%;        
	</p>	
</body>
</html>

Пример №2

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №3</title>
	<style>
		div{
		width: 500px;
		height: 300px;
		margin-top: 7em;
		border: solid 3px blue;
		background-color: yellow;
		}
		
		p{
		width: 300px;
		padding: 10%;
		border: solid 2px green;
		background-color: violet;
		}
		/* Отрицательные отступы в одном объявлении */
		. all_in_one{
		margin: -30px 30px 30px -30px;
		}		
		/* Отрицательные отступы по отдельности */
		.separate{
		margin-top: -30px;
		margin-right: 30px;        
		margin-bottom: 30px;		
		margin-left: -30px;
		}
	 
	</style>
	
</head>
<body>
	<div>
		<p >
			Отрицательные отступы в одном объявлении<br>
			margin: -30px 30px 30px -30px;      
		</p>
	</div>
	<div>
		<p >
			Тоже самое, но по отдельности<br>
			margin-top: -30px;<br>
			margin-right: 30px;<br>        
			margin-bottom: 30px;<br>		
			margin-left: -30px;			   
		</p>
	</div>
	
</body>
</html>

Пример №3

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №4</title>
	<style>
		/* Прием предварительного обнуления */
		/* всех отступов у всех элементов */		
		*{
		margin: 0;		  
		padding: 0;		  
		outline: 0;		  
		}
		
		p{
		width: 300px;
		height: 50px;
		margin: 1em;
		border: solid 2px green;
		}
		/* Переопределяем вертикальные отступы */
		. p_1{
		margin-top: 5em;		
		margin-bottom: 10em;
		}
		
		.p_2{
		margin-top: 5em;
		}
		
		span{
		width: 50px;
		border: solid 2px violet;
		}		
		/* Внешние и внутренние отступы в одном объявлении */
		span.all_in_one{
		margin: 20px 20px 20px 20px;
		}		
		/* Внешние отступы по отдельности */
		span.separate{
		margin-top: 20px;
		margin-right: 20px;        
		margin-bottom: 20px;		
		margin-left: 20px;
		}
	 
	</style>
	
</head>
<body>
	<p>
		<!-- У строчных элементов вертикальные --> 
		<!-- внешние отступы не работают, а -->
		<!-- горизонтальные суммируются -->		
		<span>11111</span>
		<span>22222</span>
		<span>33333</span>		
	</p>
	<!-- У блочных элементов вертикальные --> 
	<!-- внешние отступы схлопываются до -->
	<!-- размера большего из них -->	
	<p>
		<span>11111</span>
		<span>22222</span>
		<span>33333</span>		
	</p>
		
</body>
</html>

Пример №4

margin в CSS и HTML, что это, схлопывание полей, auto

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

Содержание

1. Центрирование и auto
2. Схлопывание margin
3. Отрицательные отступы

Поля задаются с использованием любых единиц измерения CSS, процентов или ключевого слова auto и могут иметь отрицательные значения. Например:

.box {
  margin: 0 20px 0 30px;
}

margin – это сокращенное свойство, которое принимает до четырех значений. Порядок следования отступов в перечислении такой: верх, право, низ, лево. Легко запомнить: начинаем сверху и движемся по часовой стрелке.

Если установлено менее четырех значений, предполагается, что отсутствующие значения основаны на тех, которые определены. Например, следующие два набора правил дадут одинаковые результаты:

.box {
margin: 0 2em;
}
.box {
margin: 0 2em 0 2em;
}

Таким образом, если определено только одно значение, для всех четырех полей будет установлено одно и то же значение. Если объявлено три значения, это будет margin: [верх] [слева и справа] [низ];.

Любое из отдельных полей может быть объявлено отдельной инструкцией, и в этом случае вы определяете только одно значение для каждого свойства:

.element {
  margin-top: 10px;
  margin-right: 30px;
  margin-bottom: 20px;
  margin-left: 40px;
}

Центрирование и auto

Каждое из свойств margin также может принимать значение auto. Значение auto в основном указывает браузеру определить поле за вас. В большинстве случаев значение auto будет эквивалентно значению 0 (которое является значением по умолчанию для каждого отступа). Тем не менее auto удобен для горизонтального центрирования:

.element {
  width: 200px;
  height: 100px;
  margin: 0 auto;
}

Ниже показан пример такого центрирования.

See the Pen
margin auto by Андрей (@adlibi)
on CodePen.

В этом примере для центрирования блока по горизонтали в пределах доступного пространства выполняются две вещи:

• элементу задается ширина;
• Левое и правое поля устанавливаются в auto.

Без указанной ширины значения auto не имело бы никакого эффекта.

Также следует отметить, что auto полезен только для горизонтального центрирования, а его использование для верхнего и нижнего полей не центрирует элемент по вертикали, что может сбить с толку новичков.

Схлопывание margin

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

Для иллюстрации возьмем следующий HTML-код:

<h3>Схлопывающиеся поля</h3>
<p>Текст для примера</p>

И следующий CSS:

h3 {
  margin: 0 0 20px 0;
}
p {
  margin: 10px 0 0 0;
}

В этом примере для элемента h3 задано нижнее поле в 20 пикселей. Элемент абзаца, который следует сразу за ним, имеет верхнее поле, равное 10 пикселям.

Казалось бы, что величина вертикального поля между h3 и абзацем будет в общей сложности 30 пикселей (20 пикселей + 10 пикселей). Но из-за коллапса полей фактически она окажется всего 20 пикселей. Это показано на примере ниже:

See the Pen
схлопывание margin by Андрей (@adlibi)
on CodePen.

Хотя сворачивание полей может показаться, на первый взгляд, не интуитивным, на самом деле оно полезно по нескольким причинам. Это предотвращает добавление  дополнительных, обычно нежелательных вертикальных полей.

Кроме того, это позволяет использовать более последовательный подход к объявлению универсальных полей для элементов страницы. Например, заголовки обычно имеют вертикальные поля, как и абзацы. Если бы поля не сжимались, заголовки, следующие за абзацами (или наоборот), часто требовали бы изменения полей применительно к одному из элементов, чтобы добиться равных отступов по вертикали.

Схлопывание полей также применяется к вложенным элементам. Посмотрите следующий пример:

See the Pen
схлопывание внутренних margin by Андрей (@adlibi)
on CodePen.

Здесь абзац имеет верхнее поле в 30 пикселей, который вложен в элемент div с верхним полем 40 пикселей. Кроме того, у заголовка h3 нижнее поле 20 пикселей.

Опять же, здравый смысл подсказывает, что общее пространство вертикальных полей здесь будет составлять 90 пикселей (20 + 40  + 30), но вместо этого все поля сворачиваются в одно поле в 40 пикселей (самое большое из трех). Это полезно в большинстве случаев, поскольку нет необходимости переопределять какие-либо из верхних полей, чтобы убрать лишнее вертикальное пространство.

Отрицательные отступы

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

Вот пример контейнера div, внутри которого находится заголовок h3. Для контейнера установлены внутренние отступы padding, одинаковые со всех сторон. Для h3 установлено отрицательное значение для верхнего поля margin-top: -1em;, которое нейтрализует верхний внутренний отступ padding.

See the Pen
отрицательный margin by Андрей (@adlibi)
on CodePen.

CSS Margin

❮ Предыдущий Далее ❯

---

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

---

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

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

---

Поля CSS

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

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

---

Поля — отдельные стороны

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

• margin-top
• поле справа
• нижняя граница
• поле слева

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

• auto — браузер вычисляет маржу
• длина - указывает поля в px, pt, cm и т.д.
• % — указывает отступ в % от ширины содержащего элемента
• inherit — указывает, что поле должно быть унаследовано от родительского элемента

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

Пример

Установите разные поля для всех четырех сторон элемента

:

p {
  margin-top: 100px;
  нижнее поле: 100 пикселей;
  правое поле: 150 пикселей;
  левое поле: 80 пикселей;
}

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

---

---

Поля - Сокращенное свойство

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

Свойство margin является сокращенным свойством для следующих отдельных свойств margin:

• margin-top
• поле справа
• нижняя граница
• поле слева

Итак, вот как это работает:

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

• margin: 25px 50px 75px 100px;
  • верхнее поле 25px
  • правое поле 50px
  • нижнее поле 75px
  • левое поле 100px

Пример

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

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

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

Если маржа 9Свойство 0017 имеет три значения:

• margin: 25px 50px 75px;
  • верхнее поле 25px
  • правое и левое поля составляют 50 пикселей
  • нижнее поле 75px

Пример

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

p {
поля: 25px 50px 75px;
}

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

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

• margin: 25px 50px;
  • верхнее и нижнее поля 25px
  • правое и левое поля составляют 50 пикселей

Пример

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

p {
поля: 25px 50px;
}

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

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

• margin: 25px;
  • все четыре поля 25px

Пример

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

p {
  поле: 25 пикселей;
}

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

---

Значение auto

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

Элемент будет занимать указанную ширину, а оставшееся пространство будут разделены поровну между левым и правым полем.

Пример

Использовать поле: авто:

div {
  ширина: 300 пикселей;
  поле: авто;
граница: 1px сплошной красный;
}

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

---

Значение наследования

В этом примере левое поле элемента

наследуется от родительского элемента (