БлогСфера

От создателя: я пишу в новейшей книжке главу «Блочная модель» и подошел к тому моменту, когда мне пришлось разглядывать отрицательные поля. К моему удивлению, я нашел, что нигде нет систематизированного описания отрицательных полей. Потому я был должен осознать это себе. Ниже мой начальный проект раздела «Отрицательные поля».

Крайняя спецификация гласит лишь: «Отрицательные значения для параметров margin допускаются, но могут быть ограничения в определенных реализациях». И на этом все. Не весьма полезно. MDN также в основном молчит.

Это удивительно, в особенности если учитывать, что отрицательные поля — это весьма старенькый функционал, который я, может быть, даже употреблял в собственном самом первом тесте CSS кое-где в дальнем 1998 году. (Если это был не position: relative, я уже не помню).

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

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

Вот наш тестовый элемент: обычной контейнер с 3-мя абзацами. Направьте внимание, что абзацы имеют ширину 250 пикселей. Это весьма принципиально.

Для начала давайте зададим для первого абзаца margin-bottom в -15px. На самом деле, когда браузер вычисляет точку, где должен начинаться 2-ой абзац, он перемещает эту точку на 15 пикселей ввысь. Отныне браузер укладывает все абзацы как обычно.

Свежая дата публикации старого контента не продвинет его в выдаче

Потому 2-ой абзац, являющийся нижним соседом первого, на 15 пикселей поближе к первому абзацу. Граница меж вторым и третьим абзацами остается постоянной; браузер рассчитывает ее нормально. Таковым образом, остальная часть вертикального распределения сохраняется.

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

Сейчас давайте зададим для второго абзаца margin-top в -15px. Видите ли, это дает буквально таковой же эффект. Опять, 2-ой абзац {перемещается} ввысь на 15px, а следующие абзацы следуют нормально.

Сворачивание полей

Также направьте внимание, что при использовании отрицательных полей происходит сворачивание полей. Это, по последней мере, обозначено в CSS 2.1:

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

В крайнем примере 1-ый абзац как и раньше имеет поле по дефлоту 1em (Chrome; не могу отыскать значение Firefox).

Обычно браузер берет margin-bottom первого абзаца и margin-top второго, описывает, какое из их больше, и применяет это поле меж этими 2-мя абзацами, что дает max(-15px,1em) = 1em. Хотя это не так.

В случае отрицательных полей мы берем абсолютные значения 2-ух смежных полей (15 пикселей для второго абзаца; 1em для первого) и вычитаем наименьшее (15 пикселей) из большего (1em). Это дает около 1px (в зависимости от размера шрифта, естественно).

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

Сейчас мы на сто процентов разглядели отрицательные значения margin-top и -bottom. Это время от времени нужный эффект.

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

Отрицательные margin-left и -right работают аналогично, при условии, что элемент имеет ширину. Тут мы применяем margin-left: -10px и margin-right: 10px.

Видите ли, 1-ый абзац сейчас сдвинут на 10 пикселей на лево, сохраняя при всем этом свою ширину. Таковым образом, его правый край также {перемещается} на 10 пикселей на лево.

2-ой абзац с отрицательным краем справа остался без конфигураций. Отрицательное margin-right будет влиять на хоть какой элемент справа от второго абзаца, но их нет.

Чтоб проиллюстрировать, как работает margin-right, давайте сместим абзацы, чтоб у их был сосед справа.

Сейчас мы собираемся задать в абзацах некие отрицательные поля.

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

Также направьте внимание, что 2-ой абзац имеет отрицательное значение margin-right, что значит, что он сдвинут на 10 пикселей ввысь. 3-ий абзац имеет отрицательное значение margin-bottom, которое не дает никакого эффекта, так как у него нет нижнего соседа.

Помните: сворачивание не работает для горизонтальных полей; лишь сверху и снизу. Потому нам не надо волноваться о этом в данном случае.

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

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

width: auto и отрицательное margin-right

Сейчас давайте изменим поведение отрицательного margin-right, задав для абзацев width: auto. У их больше нет фиксированной ширины; заместо этого они на сто процентов заполняют родительский элемент в согласовании с его отступами. Так работает width: auto.

Абзац с margin-left: -10px как и раньше сдвинут на 10px на лево, но его ширина возрастает. Таковым образом, его правый край не сдвинут, а остается там, где и был.

5 лучших практик чистого кодирования на JavaScript

Отрицательное значение на данный момент делает то же самое. Оно сдвигает правое поле абзаца на 10 пикселей на право, а его левый край остается на собственном месте, в итоге что ширина абзаца возрастает. Это происходит лишь тогда, когда для элемента задано width: auto. Как мы лицезрели ранее, элементы с фиксированной шириной ведут себя совсем по другому.

В конце концов, для третьего абзаца заданы оба горизонтальных поля. Его левое и правое поля сдвинуты на 10px, по существу сводя на нет отступы контейнера в 10px.

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

Это стили заголовка; контейнер имеет отступы: 10px

CSS h5 { margin-left: -10px; margin-right: -10px; padding-left: 10px; margin-top: 0; margin-bottom: 0; background-color: grey; color: white; /* no width, so defaults to width: auto */

}

Снова же, это может быть, лишь если заголовок имеет width: auto. К счастью, это так в 99% настоящих случаев использования.

Так ведут себя отрицательные поля в обычных ситуациях. Сейчас, когда я обрисовал базисное поведение, я могу разглядеть, как они ведут себя во flexbox и grid.

Редакция: Команда webformyself.

Источник