Вед-дев, Сео, Манимейкинг

Отрицательные отступы (Negative margins)

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

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

1. Приступим к рассмотрению

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

Отрицательные отступы выглядят так:

#wrapper { margin-top: -100px; }

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

Они являются валидным CSS
Да, да, я не шучу. Даже W3C говорит это: "Отрицательные значения для отступов разрешены..."

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

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

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

2. Работаем с отрицательными отступами

Отрицательные отступы являются очень мощным инструментом если использовать их корректно.

Отрицательные отступы на статичных элементах

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

Статичный элемент - это элемент, к которому не применяется обтекание (float). Изображение выше иллюстрирует как статичные элементы реагируют на отрицательные отступы.

Когда статичному элементу придается отрицательный отступ со значениями top/left, он тянет элемент в специфичном направлении. Например:

/* Двигает элемент на 10px вверх */

#mydiv1 { margin-top: -10px; }

Но когда вы применяете bottom/right, он не двигает элемент вниз/вправо как вы могли подумать. Вместо этого, он двигает элемент стоящий возле него и перекрывает его (налазит на него).

/*
* Все элементы последующие #mydiv1 передвигаются вверх на 10px,
* тем временем #mydiv1 не передвигается даже на пиксель.
*/

#mydiv1 {margin-bottom:-10px;}

Если не задана ширина элемента, добавление отрицательных отступов left/right тянет элемент в двух направлениях увеличивая его ширину. В этом случае margin работает как padding.

3. Заключение

Отрицательные отступы могут иметь место в современном веб-дизайне из-за возможности позиционировать элементы без дополнительных элементов.



Комментарии (2)

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

"Этом случае margin работает как padding." на "В этом случае margin работает как padding."

Спасибо, сейчас поправлю) Когда пишу, не замечаю грамматические ошибки, тут их оказывается - достаточно)

Разделы

Подписаться

Подписка на RSS-лента последние записи из Блога

Комменты

  • Olzhas 7 месяцев 3 недели назад
    Спасибо. С Новым Годом! 
  • Den 8 месяцев 2 недели назад
    В первой функции, при создании переменной $li_previous нужно поменять '←' с NULL, в $li_next сделать тоже самое. 
  • Гость 8 месяцев 2 недели назад
    Если все ровно так как было описано, то нет никаких сомнений что домен увел сам регистратор. Потому что вероятность того 
  • Валерий 9 месяцев 2 недели назад
    да можно делать импорт-экспорт только лишь в оболочке на входя на mysql сервер 
  • admin 9 месяцев 2 недели назад
    Валерий, а зачем вам именно так делать экспорт? Если я не ошибаюсь, то там нет какой-либо команды чтобы сделать экспорт 
  • Валерий 9 месяцев 3 недели назад
    захожу на mysql через ssh по команде  
  • admin 9 месяцев 3 недели назад
    Добрый вечер, какой у вас клиент? 
  • Валерий 9 месяцев 3 недели назад
    Здравстуйте, есть команда чтобы сделать экспорт базы внутри mysql клиента? 
  • Eduard 10 месяцев 5 дней назад
    Видать, домен хороший был. Заявление пробывали писать на мошенника? 
  • Stas 11 месяцев 2 недели назад
    Ошибка в ключе квантификатора - replace(/будешь|пить/ig, "хлеб"); Указать -g для прохода по всем совпадениям!