Как правильно рассчитывать высоту padding и margin в резиновых макетах?

Question

[Эмиль Валеев]

Для вычисления ширины и высоты пользуюсь известной формулой: "context / target = result", но как быть с padding-margin высотами, если они считаются от ширины? Хочется избежать магических цифр и иметь под рукой функции с формулой. Спасибо

Answer 1

[swcalc]

Возможно, простое решение с помощью CSS, Вам поможет - box-sizing:border-box;

Comments

[Эмиль Валеев]

не понял, каким образом оно мне поможет?
мне нужно, чтобы вертикальные отступы не были фиксированными :)

[swcalc]

Эмиль Валеев: Не понял этого, из написанного, простите)

[swcalc]

Эмиль Валеев: Если бы Вы указали, как себя должны вести margin'ы, а так, для центрирования, можно применить формулу (parent_height-child_height)/2

[Эмиль Валеев]

swcalc: спасибо, но опять не то) мне нужно не центровать элемент, мне нужно, чтобы отступы внутри и и снаружи макета были резиновыми

[swcalc]

Эмиль Валеев: Присоединяюсь к Павлу, вопрос не ясен, что означает "резуновые", ведь, если он будет центрироваться, они и будут резиновыми, или указать в %, опять - резина)

Answer 2

[Pavel Torbeev]

Так же может помочь в некоторых случаях calc()

Comments

[Эмиль Валеев]

можно пример для данной ситуации?

[Pavel Torbeev]

Например, когда есть два блока 30 и 70%, но есть еще и отступы по 20px.
Таким образом, что бы не было перевода на новую строку, width: calc(30% - 40px)
https://jsfiddle.net/uLb2yeoy/4/

[Pavel Torbeev]

https://jsfiddle.net/uLb2yeoy/5/ исправил

[Эмиль Валеев]

Спасибо, но мне нужно, чтобы у меня не было "отступов по 20px"
Именно в этом мой вопрос :)

[Pavel Torbeev]

Не понятен вопрос тогда. Есть реальный кейс?