Как работать с сетками, когда мне нужны отступы и поля?

Я избегал использования каких-либо систем сеток, потому что я всегда путал их с отступами и полями.

Давайте посмотрим, что мои сетки на 90 пикселей, и у меня есть этот код:

//HTML
<div class="col1">
 <div class="content">
   Hello world
 </div>
</div>

//CSS
.col1 { width: 90px; margin: 0px; padding: 0px; background-color: #444; }
.content { margin: 20px; color: #fff; background-color: #0087d5; width: 100%; }

JSfiddle здесь.

Как я могу работать с сетками, убедившись, что сетка остается шириной 90 пикселей, а внутри ´div´ имеет ширину 100% с отступом / полем 20 пикселей?

Я знаю, что существует много систем сеток, и я протестировал несколько, но я должен «атаковать» это неправильно, потому что мои сетки всегда расширяются, когда я начинаю использовать отступы, чтобы освободить место.


css grid grid-system
person Steven    schedule 13.06.2013    source источник
comment
Между сетками есть промежутки, поэтому вам не нужно беспокоиться о полях и отступах.   -  person Kyle    schedule 13.06.2013

Ответы (1)


arrow_upward
2
arrow_downward

Вы должны применять box-sizing, который учитывает заполнение при вычислении ширины (т.е. 90px + 10px для заполнения, заполнение будет применяться внутрь, а не создавать общую ширину 110px . Если вы хотите быть в большей безопасности, добавьте это в таблицу стилей сброса или нормализации:

* { box-sizing: border-box }

Для более старых версий Safari и Firefox:

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box }

Использование селектора с подстановочными знаками позволяет применить свойство box-sizing ко всем элементам. Я знаю, что это включено в некоторые сетевые системы, например Скелет.

person blend    schedule 13.06.2013
comment
Ах, я забыл об этом. Я попробую :) - person Steven; 14.06.2013