Добавление отступов в контейнер, но вне сетки

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

Я в основном пытаюсь сделать контейнер размером 1000 пикселей с отступами 20 пикселей, и каждый из них будет занимать 65 пикселей. Однако за пределами сетки, но внутри .container я хочу, чтобы отступы слева и справа также были 20 пикселей. Не уверен, поможет это или ухудшит ситуацию, но это мой тренировочный лист Calca для сеток


padding css grid bourbon neat
person Sulcalibur    schedule 10.10.2013    source источник

Ответы (2)


arrow_upward
4
arrow_downward

У Neat есть миксин под названием pad, который применяет отступы к текущему элементу.

Там, где вы объявили свой outer-container, просто добавьте миксин pad и укажите левое и правое значения, например:

#container {
  @include outer-container;
  @include pad(default 50px default 50px);
}

В приведенном выше примере параметры расположены в порядке top, right, bottom, left. Удобно, что миксин принимает default, поэтому вам не нужно знать существующие значения для верха и низа, если они вам не нужны.

Тем не менее, если ваш вариант использования состоит в том, чтобы предотвратить попадание фона в сторону (а не содержимого), то отступы вам не помогут, и вместо этого вам нужно будет исправить поля.

person spikeheap    schedule 18.08.2014

arrow_upward
2
arrow_downward

Обычно сеточные системы используют box-sizing: border-box; для преодоления проблем с расчетами блочной модели, касающимися полей и заполнения.

Вот хорошая статья Пола Айриша по этому вопросу: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

У Криса Койера из CSS Tricks тоже есть хорошая статья: http://css-tricks.com/box-sizing/

person Adam Thomas    schedule 10.10.2013
comment
Можете ли вы предоставить больше информации? Да, некоторые сеточные системы используют box-sizing:border-box для преодоления некоторых проблем, но как решить проблему OP? У меня такая же проблема. - person Alejandro García Iglesias; 22.10.2013