Желоба - отступы и поля для столбцов с фоном или границей

Каковы рекомендуемые рекомендации по проектированию водосточных желобов, когда форма столбца (или прямоугольника, или любого модуля макета) четко видна, поскольку имеет собственный фон или границу?

Как правило, можно поместить некоторое пространство между краем окна и его текстом. Но откуда колдовать это пространство? При расширении окна, или сокращая текст ?

Для иллюстрации, вот некоторые (но не все) варианты ...

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

Я прошел через кучу писем о макетах, основанных на сетке, но до сих пор я видел только один, посвященный этому вопросу: подтолкни свои элементы от Khoi Vinh.

Что мне не хватает? Или просто нет четкого руководства?

Поскольку одним из мотивов макетов на основе сетки является усиление чувства глобального выравнивания, я полагаю, можно утверждать, что решение зависит от того, что требует большего выравнивания; коробка или ее содержимое?

Если только я не читаю, Хой Винь утверждает вариант 3 в своей статье.

Я перехожу вперед и назад между вариантом 3 и вариантом 6. При выборе варианта 3 поле выравнивается, но его текст кажется тесным. Но, используя опцию 6, в итоге получается, что ни прямоугольник, ни текст не выровнены (хотя можно сказать, что неявная середина между краем текста и рамкой блока - это «вещь», которая теперь выровнена).

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

Ммм, я думаю, вопрос в том; Существуют ли какие-либо рекомендации по выбору вариантов, которые я проиллюстрировал, или я решил выйти за рамки закона дизайнера, и вопрос заключается лишь в том, «что выглядит и чувствует себя хорошо» ?

Каждый раз, когда вы используете сетку, вы должны использовать ее последовательно, за исключением случаев, когда у вас есть один элемент (обычно не более одного на заданной странице), нарушающий его по уважительной причине - чтобы выделить его или изменить настроение страницы. , Чтобы сделать эту работу, контраст должен быть смелым и четко продуманным. (Под «работой» я подразумеваю, что это не похоже на ошибку.)

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

В этом случае, если ваш фон немного нарушает сетку, как в # 4, это выглядит как ошибка. Это неловко Полное отсутствие желоба толпит коробку к другим колоннам. Против открытого начала текста, которое устанавливает ожидание открытости, это явно просто неправильно.

0 не дает контраста, поэтому второй столбец не дифференцирован от остальных. В некоторых случаях это то, что вы хотите.

Примеры «полустройки» в № 5 и № 6 переопределяют желоб, делая его уже. Они фактически переопределяют всю сетку по горизонтали и вертикали, потому что в этом случае желоб в конечном итоге будет точно таким же, как межстрочный интервал. Это плохо для текста, но может работать с полем. В # 6, однако, у вас есть непропорционально пустое пространство с обеих сторон текста по сравнению с верхом и низом. Это неловко и неудобно, потому что это не имеет смысла. № 5 будет предпочтительнее, потому что пустое пространство распределено более равномерно. По той же причине, № 3 предпочтительнее, чем № 2.

В общем, тогда я бы согласился с Лорен и рекомендовал бы № 3 как ваш лучший шанс. Это также лучший общий случай, независимо от количества столбцов.

Есть правила. Они, конечно, могут быть сломаны, если у вас есть веская причина, но в любое время вы должны быть целеустремленными, смелыми и четко «как задумано». Helvetica Black в паре с Грузией работает, потому что они разные; Требушет в паре с Верданой натирает нервы, потому что они не достаточно разные. Большой квадратный красный прямоугольник, охватывающий полтора столбца, может сработать; слегка сероватый не будет.

Я голосую за Вариант 3. Края серого поля определяют столбец по вертикали, поэтому эти линии нельзя нарушать (без причины). Желоба должны быть одинаковыми для всех трех столбцов, поэтому вставьте текст внутри серого поля. Вставка варианта 2 слишком глубокая.

Это то, что я привык делать в печати, так что в Интернете это выглядит "правильно".

Если это для веб-дизайна, я настоятельно рекомендую не использовать какие-либо отступы в горизонтальном направлении, если вы заинтересованы в совместимости между браузерами. Различные браузеры обрабатывают div и padding достаточно по-разному, чтобы презентация могла нарушиться.

Какой бы путь вы ни выбрали, используйте маржу только горизонтально. Это требует добавления одного или двух классов, чтобы получить точный макет, который вы хотите (например, один набор полей для div и другой для абзаца), но в долгосрочной перспективе это более надежно. Вертикальное заполнение, как правило, не является проблемой.