Skip to content

Files

Latest commit

lex111lex111
Исправление опечаток
Sep 8, 2019
ac356d3 · Sep 8, 2019

History

History
executable file
·
170 lines (111 loc) · 7.56 KB

article.md

File metadata and controls

executable file
·
170 lines (111 loc) · 7.56 KB

Свойство margin

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

Объединение отступов

Вертикальные отступы поглощают друг друга, горизонтальные -- нет.

Например, вот документ с вертикальными и горизонтальными отступами:

<body style="background: #aef">
  <p style="*!*margin:20px;*/!* background:white">

    <span style="*!*margin:20px;*/!* background:orange">Горизонтальный 20px</span>
    ← 40px →
    <span style="*!*margin:20px;*/!* background:orange">20px Отступ </span>

  </p>
  <p style="*!*margin:15px;*/!* background:white">Вертикальный 20px</p>
</body>

Расстояние по горизонтали между элементами SPAN равно 40px, так как горизонтальные отступы по 20px сложились.

А вот по вертикали расстояние от SPAN до P равно 20px: из двух вертикальных отступов выбирается больший max(20px, 15px) = 20px и применяется.

Отрицательные margin-top/left

Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места.

В CSS есть другой способ добиться похожего эффекта -- а именно, position:relative. Но между ними есть одно принципиальное различие.

При сдвиге через margin соседние элементы занимают освободившееся пространство, в отличие от position: relative, при котором элемент визуально сдвигается, но место, где он был, остаётся "занятым".

То есть, элемент продолжает полноценно участвовать в потоке.

Пример: вынос заголовка

Например, есть документ с информационными блоками:

<style>
  div {
    border: 1px solid blue;
    margin: 2em;
    font: .8em/1.25 sans-serif;
  }

  h2 {
    background: #aef;
    margin: 0 0 0.8em 0;
  }
</style>

<div>
  <h2>Общие положения</h2>

  <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
</div>

<div>
  <h2>Общие обязанности водителей</h2>

  <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
  <ul>
    <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
    <li>...и так далее...</li>
  </ul>
</div>

Использование отрицательного margin-top позволяет вынести заголовки над блоком.

/* вверх чуть больше, чем на высоту строки (1.25em) */

h2 {
  margin-top: -1.3em;
}

Результат:

[iframe src="h2-margin-top" height=330 border=1 link]

А вот, что бы было при использовании position:

h2 {
  position: relative;
  top: -1.3em;
}

Результат:

[iframe src="h2-margin-top-position" height=330 border=1 link]

При использовании position, в отличие от margin, на месте заголовков, внутри блоков, осталось пустое пространство.

Пример: вынос разрыва

Организуем информацию чуть по-другому. Пусть после каждого заголовка будет разрыв:

<div>
  <h2>Заголовок</h2>
  <hr>

  <p>Текст Текст Текст.</p>
</div>

Пример документа с такими разрывами:

[iframe src="hr-margin-left-src" height=320 border=1 link]

Для красоты мы хотим, чтобы разрыв HR начинался левее, чем основной текст. Отрицательный margin-left нам поможет:

/*+ no-beautify */
hr.margin { margin-left: -2em; }

/* для сравнения */
hr.position { position: relative; left: -2em; }

Результат:

[iframe src="hr-margin-left" height=320 border=1 link]

Обратите внимание на разницу между методами сдвига!

  • hr.margin сначала сдвинулся, а потом нарисовался до конца блока.
  • hr.position сначала нарисовался, а потом сдвинулся -- в результате справа осталось пустое пространство.

Уже отсюда видно, что отрицательные margin -- исключительно полезное средство позиционирования!

Отрицательные margin-right/bottom

Отрицательные margin-right/bottom ведут себя по-другому, чем margin-left/top. Они не сдвигают элемент, а "укорачивают" его.

То есть, хотя сам размер блока не уменьшается, но следующий элемент будет думать, что он меньше на указанное в margin-right/bottom значение.

Например, в примере ниже вторая строка налезает на первую:

<div style="border: 1px solid blue; *!*margin-bottom: -0.5em*/!*">
  Первый
</div>

<div style="border: 1px solid red">
  Второй div думает, что высота первого на 0.5em меньше
</div>

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

Например:

[iframe src="negative-margin-bottom" border=1 height=200 link="Посмотреть в отдельном окне" edit]

Итого

  • Отрицательные margin-left/top сдвигают элемент влево-вверх. Остальные элементы это учитывают, в отличие от сдвига через position.
  • Отрицательные margin-right/bottom заставляют другие элементы думать, что блок меньше по размеру справа-внизу, чем он на самом деле.

Отличная статья на тему отрицательных margin: The Definitive Guide to Using Negative Margins