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

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

В результате этого возникает вопрос, как это реализовать? Есть несколько простых и хитрых способов.

Функция calc()

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

CSS

.block {
    width: calc(30% + 30px);
}

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

Комбинация margin и padding

Не стоит забывать о том, что существует два вида отступов: внешний, который определяется свойством margin, и внутренний, который устанавливается через padding. Поэтому такой отступ, как 30% + 30px можно осуществить комбинированием из внешнего отступа в 30% и внутреннего отступа в 30 пикселей. Схема такого решения будет выглядеть следующим образом:

Код этой операции выглядит достаточно просто и предсказуемо:

CSS

.block {
    margin-left: 30%;
    padding-left: 30px;
}

Какие можно отметить плюсы способа?

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

Когда есть плюсы — всегда найдутся минусы:

• если ширина блока фиксирована, то в это значение нужно будет внести поправки с учетом значения padding;
• требуемый отступ будет определен только для содержимого контейнера. В случае, если блок будет иметь заливку, то нужно будет создать еще один контейнер, внутри этого блока.
• исключается возможность установить padding-left, так как оно уже устанавливает отступ исследуемого блока. Исправить ситуацию можно аналогично предыдущему случаю — добавить еще один div.

Касательно последнего тезиса, можно установить прозрачный border, который заменит в нашей комбинации padding-left. Это позволит избежать создания еще одного контейнера и позволит прописать нужный внутренний отступ.

Комбинация margin и относительного позиционирования

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

В CSS-файл записываем следующее

CSS

.block {
    margin-left: 30%;
    position:relative;
    left: 30px;
}

К преимуществам можно отнести:

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

Недостатки:

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

Итог

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