Как отрицательные поля в CSS работают и почему (margin-top: -5! = Margin-bottom: 5)?

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

.item { position:absolute; top:50%; margin-top:-8px; /* half of height */ height: 16px; } 

Когда вы видите в метрическом виде, как в Chrome, это то, что вы видите:

введите описание изображения здесь

Тем не менее, нет визуального поля, изображенного при наведении над элементом, т. Е. Край является «вне» границы и может быть визуализирован. Но отрицательная маржа не появляется. Как они выглядят и что это делает другим?

Почему margin-top:-8px не совпадает с margin-bottom:8px ?

Итак, как работают отрицательные поля и какова их интуиция. Как они «подхватывают» (в случае margin-top < 0 ) элемент?

Отрицательные поля действительны в css и понимание их (совместимого) поведения в основном основано на коробке модели и разваливании маржи. Хотя некоторые сценарии более сложны, многие ошибки могут быть устранены после изучения спецификации.

Например, рендеринг вашего образца кода определяется спецификацией css, как описано при вычислении высот и полей для абсолютно позиционированных незаменяемых элементов .

Если бы я сделал графическое представление, я бы, вероятно, пошел с чем-то вроде этого (не для масштабирования):

отрицательный верхний край

Поле поля потеряло 8 8px вверху, однако это не влияет на поля содержимого и заполнения . Поскольку ваш элемент абсолютно позиционирован, перемещение элемента 8px вверх не вызывает каких-либо дальнейших нарушений макета; со статическим содержимым в streamе, это не всегда так.

Бонус:

Все еще нужно убедить, что спецификации чтения – это путь (в отличие от таких статей )? Я вижу, вы пытаетесь вертикально центрировать элемент, так почему вам нужно установить margin-top:-8px; а не margin-top:-50%; ?

Ну, вертикальное центрирование в CSS сложнее, чем должно быть . При настройке даже верхнего или нижнего полей в% значение рассчитывается как процент всегда относительно ширины содержащего блока . Это довольно распространенная ошибка, и причуда редко описывается вне w3 docos

Я попытаюсь объяснить это визуально:

 /** * explaining margins */ body { padding: 3em 15% } .parent { width: 50%; width: 400px; height: 400px; position: relative; background: lemonchiffon; } .parent:before, .parent:after { position: absolute; content: ""; } .parent:before { top: 0; bottom: 0; left: 50%; border-left: dashed 1px #ccc; } .parent:after { left: 0; right: 0; top: 50%; border-top: dashed 1px #ccc; } .child { width: 200px; height: 200px; background: rgba(200, 198, 133, .5); } ul { padding: 5% 20px; } .set1 .child { margin: 0; position: relative; } .set2 .child { margin-left: 75px; position: relative; } .set3 .child { margin-left: -75px; position: relative; } /* position absolute */ .set4 .child { top: 50%; left: 50%; margin: 0; position: absolute; } .set5 .child { top: 50%; left: 50%; margin-left: 75px; position: absolute; } .set6 .child { top: 50%; /* level from which margin-top starts - downwards, in the case of a positive margin - upwards, in the case of a negative margin */ left: 50%; /* level from which margin-left starts - towards right, in the case of a positive margin - towards left, in the case of a negative margin */ margin: -75px; position: absolute; } тем /** * explaining margins */ body { padding: 3em 15% } .parent { width: 50%; width: 400px; height: 400px; position: relative; background: lemonchiffon; } .parent:before, .parent:after { position: absolute; content: ""; } .parent:before { top: 0; bottom: 0; left: 50%; border-left: dashed 1px #ccc; } .parent:after { left: 0; right: 0; top: 50%; border-top: dashed 1px #ccc; } .child { width: 200px; height: 200px; background: rgba(200, 198, 133, .5); } ul { padding: 5% 20px; } .set1 .child { margin: 0; position: relative; } .set2 .child { margin-left: 75px; position: relative; } .set3 .child { margin-left: -75px; position: relative; } /* position absolute */ .set4 .child { top: 50%; left: 50%; margin: 0; position: absolute; } .set5 .child { top: 50%; left: 50%; margin-left: 75px; position: absolute; } .set6 .child { top: 50%; /* level from which margin-top starts - downwards, in the case of a positive margin - upwards, in the case of a negative margin */ left: 50%; /* level from which margin-left starts - towards right, in the case of a positive margin - towards left, in the case of a negative margin */ margin: -75px; position: absolute; } 
  

position: relative;

Set 1

 .set1 .child { margin: 0; position: relative; } 

Set 2

 .set2 .child { margin-left: 75px; position: relative; } 

Set 3

 .set3 .child { margin-left: -75px; position: relative; } 

position: absolute;

Set 4

 .set4 .child { top: 50%; left: 50%; margin: 0; position: absolute; } 

Set 5

 .set5 .child { top: 50%; left: 50%; margin-left: 75px; position: absolute; } 

Set 6

 .set6 .child { top: 50%; left: 50%; margin: -75px; position: absolute; } 

Маржа – это интервал за пределами вашего элемента, так же как прокладка – это интервал внутри вашего элемента.

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

Верхний край -8px означает, что он будет на 8px выше, чем если бы он имел 0 маржи.

Нижний край 8px означает, что под ним будет ниже 8px, если бы у него было 0 полей.

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

«Почему margin-top: -8px не совпадает с margin-bottom: 8px?»

мы также можем спросить:

Почему положительный нижний предел «подхватывает» предшествующие элементы, тогда как положительный верхний край «сбивает» следующие элементы?

так что мы видим, что существует разница в рендеринг полей в зависимости от того, к какой стороне они применяются – верхние (и левые) поля отличаются от нижних (и правых).

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

рассмотрим следующий html:

 

аналогичные их положению в коде, эти три поля отображаются в браузере «сверху вниз» ( сохраняя все просто, мы не будем рассматривать здесь свойство order модуля css3 «flex-box» ). поэтому, всякий раз, когда стили применяются к блоку 3, позиции предыдущего элемента (для полей 1 и 2) уже определены и больше не должны изменяться для скорости рендеринга.

теперь представьте верхний край -10px для windows 3. вместо того, чтобы переместить все предыдущие элементы, чтобы собрать некоторое пространство, браузер просто вытащит коробку 3 вверх, поэтому она будет отображаться поверх (или снизу, в зависимости от z-индекса ) любые предыдущие элементы. даже если производительность не была проблемой, перемещение всех элементов могло означать смещение их из windows просмотра, поэтому текущую позицию прокрутки пришлось бы изменить, чтобы снова увидеть все видимое.

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

Поскольку вы использовали абсолютное позиционирование и указали верхний процент, только маржа-верх будет влиять на местоположение вашего объекта .item. Если вместо этого вы позиционировали его с помощью дна: 50%, тогда вам понадобится margin-bottom -8px, чтобы центрировать его, а margin-top не повлияет.

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

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

В вашем случае верхние 50% приведут к тому, что верхняя часть элемента начнется в середине страницы. Применяя отрицательное верхнее поле, браузер использует точку 8px в верхнем элементе (то есть в строке по середине), как место для размещения на 50%.

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

Интересно, хорошо ли ответил на этот вопрос: как работают поля css и почему это margin-top: -5; это не то же самое, что и margin-bottom: 5 ;?

Маржа – это расстояние от окружения элемента. margin-top говорит: «… расстояние от окружения по мере того, как мы измеряем« сверху »стороны« ящика »элемента, а край поля – это расстояние от нижней« стороны »« windows ». Затем margin-top: 5; связан с верхним «боковым» периметром, -5 в этом случае; все, что приближается с верхней стороны, может перекрывать верхнюю «сторону» элемента на 5, а margin-bottom: 5; означает расстояние между нижней стороной элемента и окружающим 5.

В основном это, но затронутые элементами float’ed и т. П.: http://www.w3.org/TR/CSS2/box.html#margin-properties .

http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

Я буду исправлен.

Давайте будем гением компьютера.