Css не работает отрицательный margin

Полное руководство по использованию отрицательных полей margin в CSS

Есть несколько точек зрения на использование отрицательных полей ( margin ) в CSS, как резко отрицательное, так и сугубо положительное.

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

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

• Валидность в css
  W3C говорит нам: ‛Отрицательные значения для свойства margin использовать допустимо“. Более подробно на www.w3.org/TR/CSS2/box.html#margin-properties
• Отрицательные поля не ХАК
  Это идет от непонимания и от внешнего воздействия отрицательного margin на верстку. Отрицательное поле может стать хаком лишь тогда, когда вы пытаетесь поправить ошибку в своем коде при помощи отрицательного margin .
• Воздействие на поток
  Отрицательные поля не разрушают поток, если применяются к ‛не плавающим“ элементам. То есть если вы используете отрицательно поле, чтобы толкнуть элемент вверх, то все последующие элементы также будут приподняты.
• Разная реакция, когда используется совместно с float
  Отрицательные поля это все же не повседневный CSS, поэтому вы должны использовать такой margin с осторожностью.
• Какие-то проблемы dreamveawer
  Тут и обсуждать нечего.
• Полная совместимость
  Отрицательные поля поддерживаются всеми браузерами, включая IE6.

Работаем с отрицательными полями ( margin )

Отрицательные поля очень мощная штука, когда используется корректно.

Отрицательное поле и статический элемент

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

Когда статический элемент получает отрицательный margin для top/left, то элемент ‛движется“ в указанном(top/left) направлении.

Отрицательное поле для плавающих элементов

Рассмотрим следующую разметку:

• Если отрицательное поле применяется к плавающему элементу, то создается пространство, приводящее к перекрытию контента. Это замечательно для жидких макетов, где одна колонка имеет ширину 100% , а другая колонка, например, фиксированную ширину в 100px .

Эффективные техники, основанные на использовании отрицательного margin

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

Создание простого 3-колончатого списка из обычного неупорядоченного списка

Если у вас есть список, в котором так много пунктов, что показывать их по вертикали неразумно, то почему бы не разделить такой список на три колонки?

Отрицательные поля справятся с этим, причем без использования дополнительных тегов и свойства float . Просто удивительно, как легко разделить список на три колонки, например:

Назначив margin-top:-2.6em (удваиваем line-height для тега li ), все элементы выровняются по верхней границе.

Наложение контента при помощи дополнительного акцента.

Перекрытие элемента с определенной целью хороший дизайнерский шаг. Это добавляет акцент к определенным элементам, так как создает илюзию глубины. Хорошим примером может послужить счетчик комментариев на Phlashers.com, где используется техника наложения, чтобы привлечь внимание на число комментариев. Объедините это с z-index и проявите немного креативности для вашего дизайна.

3d-текст

Создать скошенный текст легко: создайте две версии одного и того же текста и при помощи отрицательного поля сместите первую копию с текстом на 1-2 пикселя относительно второй копии с текстом.

Простой двухколончатый макет

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

И вы создали простой 2-колончатый макет в рекордно короткое время, данные прием работает и в IE6. Теперь чтобы предотвратить врезку текста внутри #content добавьте следующий код:

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

Подталкивание элементов в пространстве

Самый популярные прием использования отрицательных полей. Если вам требуется поправить положения 10-го div , то проще всего подтолкнуть его, используя отрицательное поле, чем править 9 предыдущих div .

Заключение

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

Источник

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

Я часто сталкиваюсь с ситуацией, когда в череде блоков с одинаковыми отступами и общим контейнером, у первого или последнего блока нет отступа или он отличается от остальных. Какое–то время для решения этой «проблемы» я использовал «костыли», вроде классов first или last, пока не освоил технику работы с отрицательными отступами.

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

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

1. div <
2. border: 2px solid #CCC;
3. overflow: hidden;
4. width: 640px;
5. >
6. ul <
7. margin: -20px 0 0 -20px;
8. overflow: hidden;
9. padding: 0;
10. >
11. ul li <
12. background: #C06;
13. float: left;
14. height: 100px;
15. list-style: none;
16. margin: 20px 0 0 20px;
17. width: 200px;
18. >
19. *html ul <
20. width: 660px;
21. >
22. *html ul li <
23. display: inline;
24. >

Задача решена и теперь давайте заострим внимание на основных моментах. Центральный момент — это отрицательные значения свойства margin для тега ul, и свойство overflow со значением hidden для тега div. С их помощью мы сдвигаем блок ul относительно блока div за пределы его границы на 20px вверх и влево, а при помощи overflow отсекаем ненужные нам отступы. В этих двух свойствах и заключается суть метода.

Но как всегда есть одно «но» или даже три, это свойство overflow для тега ul и два отдельных свойства для браузера IE 6.0. Первое свойство применяется для нейтрализации действия свойства float на родительский блок. А для IE 6.0 я отдельно использовал свойство width для блока ul, так как IE не может посчитать её сам относительно дочерних блоков, и свойство display, чтобы устранить удвоение отступов, когда к блоку применяется свойство float.

Представленный пример был протестирован в браузерах: IE 6.0+, Firefox 2.0, Opera 9.0, Safari 2.0+. Еще раз хочу сказать, что эта техника универсальна и может применяться повсеместно, где это необходимо, в различных вариациях. Экспериментируйте и делитесь опытом 🙂

Источник

Почему отрицательный margin не работает?

Dubrovin, так никто не верстает и это и не должно работать. Для row добавляют отрицательный margin только по оси x.

И это используют только для универсальной сетки с рвзмерами задаными в процентах и переносами элементов по медиазапросам. Если вам не нужен такой функционал, то и отрицательный margin использовать не нужно.

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

Но существует такая штука как схлопывания вертикальных margin, именно из-за нее вертикальные margin и не любят. Если не умете с этим работать, то лучше использовать padding в родителе.

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

Dubrovin, для чего вам такой странный кейс? Покажите практическое применение. Универсальную сетку так никто не делает. Либо делайте, что-то проще под конкретную задачу, либо делайте универсальную гибкую сетку.

Это классика. Но вам надо немного другое решение.

А вот это, например, страшный костыль и так не верстают вещи которые должны быть универсальными:
width: calc( 25% — 20px );

Антон Спирин, задача сверстать вот такую универсальную адаптивную сетку: prntscr.com/ip0osv
контейнер, который показан на скриншоте розовым, должен быть без отступов снизу сверху справа слева.
отступ должен быть только между элементами.
Это легко делается с помощью CSS Grid и Grid Gap, но адаптивность должна работать следующим образом:
если ширина у элементов (на скриншоте показаны жёлтым цветом) задана фиксированной в пикселях (width или min-width) и, например, для 3-х элементов в ряду эти элемены перестают «помещаться» в контейнер при сжатии экрана, то элементы должны переноситься на новую строку.

Медиазапросы хорошо работают когда колонки «резиновые», т.е. заданы в процентах. При этом идёт привязка к ширине экрана. А нужна сетка, которая будет отталкиваться от минимальной ширины элемента, чтобы если несколько элементов не помещаются в контейнер при сжатии, то они автоматически переносились. Сделать это с помощью CSS Grid, когда внутри грида элементы с разной шириной, насколько я знаю, невозможно, поэтому пытаюсь сделать это на Flexbox.

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

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

Dubrovin, на практике такое обычно не применяют, так как нижний margin в большинстве кейсов если и не необходимость, то приветствуется.

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

Антон Спирин, погуглите flexbox grid without media queries.
сетка вообще получается без медиазапросов, весь css сетки уменьшается в 1кб. На счёт разной ширины — если ширина нужна одинаковая то это легко делается модификатором у блока сетки с flex-grow: 1;
На счёт вашей кучи готовых универсальных решений — эти решения хреново работают, например, с формами, где в одном боксе могут лежать поля абсолютно разной, но кратной, ширины. Второй момент — размер, не встречал сетку размером меньше килобайта (возможно я плохо ищу).
На счёт своего вопроса — решение было простым, нужно было добавить overflow: hidden контейнеру, в котором находится ряд. При этом отрицательные маржины отлично работают по вертикали без костыля с нижним маржином, который вы предлагаете.

Ещё кстати минус вашего решения в том, что вы не сможете замиксовать класс колонки самому элементу, т.е. вам обязательно нужно вкладывать элементы внутрь div’а с колонкой (это потому что внутри вы используете именно положительный padding, а нужно использовать положительный margin, потому что padding используется для позиционирования содержимого контента, а не позиционирования элемента в блоке. Элементарный пример — Поле input или кнопка, у которых уже задан padding. В моём примере я могу замиксовать кнопку с колонкой и вложить в ряд, который является формой и всё это будет прекрасно адаптивно работать на любом экране без медиазапросов и без лишних дивов с и ).

p.s. Вы используете готовое, видимо потому, что у вас дедлайны и нет времени на подумать и изобрести своё, но лучше. У меня времени предостаточно 🙂

Dubrovin,
0. вы сначала пишите, что вам нужна сетка с фиксированными элементами, а затем скидываете пример с резиновыми элементами. Ваши элементы больше не фиксированные, так как вы добавили flex-grow. Не надо так. Учитесь точно формулировать требования.
1. По поводу сетки без медиазапросов. Я вам написал выше, что в таком случае медиазапросы ставят на контейнер. В противном случае при схлопывании сетки, она будет уже остального контента на странице. Что в большинстве случаев не должно происходить.
Решайте задачи опираясь на реальные кейсы.
2. Само решение с overflow: hidden — грубейший и нелепейший костыль. Попробуйте добавьте в элементы своей сетки dropdown или всплывающий tooltip и везде где они будут выходить за край сетки, они будут скрыты за overflow.
3. Ваша навязчивое желание уложиться 1кб в 2018 году не несет под собой никаких объективных плюсов. Надуманные предрассудки и экономия на спичках.
4. Если у вас не работают готовые решения, написанные профессионалами и прошедшие проверку временем, вывод напрашивается только один, вы не умеете их использовать.
5. Нижний margin в верстке сетки не костыль, в отличии от отрицательного.
6. Я вам своего решения не предлагал, разве скидывал фидл с простым и изящным решением, на случай если не нужна сетка и отрывок кода из Twitter Bootstrap 4. Если вы думаете, что вы лучший программист, чем команда Twitter, то вы очень сильно ошибаетесь.
Если вы в их решении замените padding на margin, то вся ваша верстка рассыпется. Лучше попробуйте детально разобрать их решение, посмотреть на бесчисленные кейсы применения и подумать, почему их универсальная сетка получилась именно такой какая она есть. Очень развивает.
7. Мы в компании как раз не используем готовых решений. Не используем по той простой причине, что умеем верстать и проектируем компоненты исходя из реальных задач, а проекты у нас большие и долгосрочные. Вам же я рекомендую не изобретать велосипеды и отталкиваться от решений профессионалов, так как, насколько я вижу, вы и верстаете плохо и опыта у вас, видимо, совсем нет, так как в ваших попытках найти решение уже промелькнула целая куча грубых костылей, которые дали бы о себе знать при попытке такое решение использовать.

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

Источник