Расстановка полей и отступов в CSS. Как сделать отступы в CSS

Блочная верстка частенько используется при создании сайта или блога. Как следствие этого — часто требуется делать отступы у блоков. По этой причине о том, как сделать отступы в CSS подробно описано в данном уроке. Для браузера каждый тег является контейнером, у которого есть содержимое, внутренний отступ, внешние поля, а также рамка. В данном уроке мы научимся делать внутренние и внешние отступы, рассмотрим основные их параметры.

На рисунке ниже наглядно представлены параметры отступов блоков:

Как видно, отступы можно делать в четырех направлениях: верхний отступ (top), нижний отступ (bottom), левый отступ (left) и правый отступ (right). В качестве единиц измерения могут быть пиксели, проценты и другие единицы CSS — подробнее о них . В уроке используются пиксели.

Внутренние отступы блоков

За внутренние отступы в CSS отвечает свойство padding . Итак, давайте рассмотрим пример задания внутренних отступов у блока:

padding-top: 5px; /*верхний внутренний отступ*/ padding-left: 8px; /*левый внутренний отступ*/ padding-right: 8px; /*правый внутренний отступ*/ padding-bottom: 5px; /*нижний внутренний отступ*/

В данном примере внутренние отступы задаются отдельно для каждой стороны блока. Кроме этого, существует несколько способов задания отступов в CSS:

margin: 5px 8px 5px 8px; /*верхний, правый, нижний, левый внешние отступы*/ margin: 5px 8px 5px; /*описывает верхний, левый и правый, нижний отступы*/ margin: 5px 8px; /*описывает верхний и нижний, правый и левый отступы*/ margin: 7px; /*описывает все внутренние отступы по 7px*/

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

Внешние отступы блоков

За внешние отступы в CSS отвечает свойство margin . Примеры внешних отступов в CSS:

margin-top: 5px; /*верхний внешний отступ*/ margin-left: 10px; /*левый внешний отступ*/ margin-right: 10px; /*правый внешний отступ*/ margin-bottom: 5px; /*нижний внешний отступ*/

padding: 5px 10px 5px 10px; /*верхний, правый, нижний, левый внешние отступы*/ padding: 5px 10px 5px; /*описывает верхний, левый и правый, нижний отступы*/ padding: 5px 10px; /*описывает верхний и нижний, правый и левый отступы*/ padding: 7px; /*описывает все внешние отступы по 7px*/

Таким образом, как сделать отступы в CSS — вопрос не сложный, но весьма актуальный. Чтобы лучше усвоить описанную выше информацию следует запомнить, что существует два свойства: padding — внутренние отступы и margin — внешние отступы. Также, как вы уже знаете, способов задания отступов существует несколько, можно их использовать.

Все элементы, которые встречаются на HTML-странице есть не что иное, как прямоугольники. И в основном только двух типов:

1. блочные (blok), которые занимают всю ширину, где находятся, и отделены от того, что над и под ними. Например, это теги DIV, P, H.
2. встроенные (inline). Например, SPAN, STRONG, EM, A и IMG.

таблиц .

Роль свойства возросла после перехода с table-верстки на div-верстку. Это объясняется тем, что float позволяет веб-разработчику включать столбцы не прибегая к таблице. Оно может принимать значения right , left , но не center .

С помощью свойства display: block; или display: inline; мы преобразуем один тип прямоугольника в другой. Например, список UL, который имеет ряд блоков LI, можно расположить горизонтально:

• ПУНКТ
• ПУНКТ
• ПУНКТ

• ПУНКТ
• ПУНКТ
• ПУНКТ

При использовании свойства float прямоугольник является блочным, но с характерной особенностью: его ширина не будет распространяться на всё содержимое. Например, заголовок h3 выглядит как:

это HEADER h3

это HEADER h3

это HEADER h3

это HEADER h3

Верхний текст остаётся неизменным, поскольку плавающий элемент не может располагаться выше строки, в которой он создан.

это HEADER h3

А вот красный текст находится под заголовком и он будет его обтекать, не имея при этом никаких дополнительных стилей. И только высота h3 будет преодолена, страница вернётся к естественному порядку.

А Б В Г Несколько плавающих элементов будут соблюдать последовательность своего расположения.

АБВГтекст...

А Б В Г Если мы ходим, чтобы обтекание элемента было прекращено с определённого момента (отсюда), применяется свойство clear. Его мы можем добавить в пустой тег

Для того, чтобы равномерно разместить несколько блочных прямоугольников, зададим им одинаковую ширину.

Табличная вёрстка очень удобна и понятна, наверное, поэтому появился её аналог display: table;. Та же форма получается при меньшем использовании кода.

Теперь видно каким образом строится галерея изображений. , надеюсь, никто не позабыл.

текст...

текст...

Строчные блоки (inline-block) во многих случаях очень удобное средство разметки. Примеры их использования можно посмотреть в статьях , .

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

Допустим имеем такой HTML:

• Стороки.
• Просто
• строки

Делаем элементы строчными:

Li{ display:inline; }

…или строчными блоками:

Li{ display:inline-block; /* Следующие две строки для IE6-7 - эмулируем поведение строчного блока*/ //display:inline; zoom:1; }

Проблема

Большинство браузеров разделяет строчные блоки (элементы) отступами. Для удобства восприятия я немного раскрасил блоки.

Опаньки! Что за отступы? Я ничего такого не прописывал!

Давай договоримся, что здесь и далее я буду писать просто «строчный блок», а подразумевать «строчный блок ( :inline-block) или просто строчный элемент (display:inline)», поскольку проблема у них совершенно общая и лечится она тоже одинаково.

Кого лечим?

Итак строчные блоки обзавелись загадочными отступами. Конечно, это касается не только списков. Так же поведет себя и группа расположенных подряд, например, "ов.

Справедливости ради, следует заметить, что IE6 и IE7 отрисуют все это дело без отступов:

Вот так хочу, чтобы все браузеры отображали!

Не будем вдаваться в детали вопроса, кто прав, а кто виноват (читай — криво поддерживает стандарты), просто добьемся кроссбраузерности. Очень удобно, когда поведение предсказуемое — не задавал я никаких отступов, значит и рисовать мне их не нужно!

На самом деле все просто — чтобы убрать отступы, нужно понять, откуда они там вообще взялись!

Откуда отступы-то?

А понять не сложно. Достаточно просто записать теги в одну строку:

• Стороки.
• Просто
• строки

Чудеса! Отступы пропали сами собой! Вывод: порождают их невидимые символы между тегами — перенос или пробел.

Само собой, «писать все в одну строку» хоть и является кроссбраузерным решением проблемы, но тут не рассматривается, по понятным причинам (ну кто ж пишет без отступов?). Ищем другие пути.

Долой отступы!

Раз отступы создают символы из контейнера, здравой мыслью будет эти символы «обезвредить» — задать им :0; (главное, не забыть, что это свойство наследуется и перебить его для самих потомков):

Ul{ font-size:0; } li{ font-size:14px; display:inline; }

Отличное решение! Строчные блоки действительно прижались друг к другу. Осталась еще небольшая косметическая проблема: в некоторых браузерах (например, в Opera 9.5 и младше) замечен отступ сверху или снизу в пределах родителя (родитель на рисунке залит бледным серо-зеленым):

картинка увеличена, чтоб было видно отступы по вертикали

Проблема эта сродни описанной в статье , и лечится примерно так же: добавляем :0; (опять не забываем перекрыть у потомка). Итак, получаем:

Ul{ font-size:0; line-height:0; } li{ font-size:14px; line-height:normal; /* ну или другое подходящее значение */ display:inline; }

Теперь-то все хорошо и красиво? Не тут-то было!

Пришла беда, откуда не ждали

Видать, действительно эти отступы должны быть! В подтверждение этому есть два железных аргумента:

1. их не рисует IE6-7;
2. их, несмотря на наши старания, все равно рисуют Webkit-браузеры.

Да-да! И Safari и Chrome после всех вышеизложенных ухищрений соизволили просто уменьшить отступы с трех пикселей до одного!

Упрямые webkit"ы не хотят сдаваться!

Update 3.07.2011 by Nick. Еще один скрытый сюрприз преподнес FF. Если масштабировать страницу иногда наблюдается дополнительный отступ в 1px сверху. Лечится это добавлением правила display: -moz-inline-stack;

Окончательное решение

Побороть webkit"ы получилось с помощью :-1px. При этом никаких вредных побочных эффектов обнаружено не было (если, конечно не забыть перекрыть свойство у потомков).

Окончательный CSS с кроссбраузерным решением для строчных элементов:

Ul{ font-size:0; /* убираем горизонтальные отступы */ line-height:0; /* ...и вертикальные в некоторых браузерах */ letter-spacing:-1px; /* переубеждаем webkit"ы */ } li{ font-size:14px; /* Не забываем восстановить нормальные значения */ line-height:normal; letter-spacing:normal; display:inline; }

Для строчных блоков:

Ul{ font-size:0; /* убираем горизонтальные отступы */ line-height:0; /* ...и вертикальные в некоторых браузерах */ letter-spacing:-1px; /* переубеждаем webkit"ы */ } li{ font-size:14px; /* Не забываем восстановить нормальные значения */ line-height:normal; letter-spacing:normal; display: -moz-inline-stack!important; display:inline-block; //display:inline; zoom:1; }

Не забудь, что свойство zoom невалидно. Поэтому в боевых условиях выноси его и в отдельный CSS, подключаемый с помощью .