Строчные блоки (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, подключаемый с помощью .

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

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

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

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

На что здесь надо обратить внимание. Ну, во-первых, для ячеек таблиц не существует полей в обычном понимании, вместо них используется , во-вторых, у тега имеются и поля, и отступы, как у обычного HTML-элемента. Ну и, в-третьих, отступ от внутреннего края таблицы до ячеек складывается из размера внутреннего отступа таблицы, к которому прибавляется размер расстояния между ячейками.

Ну что ж, а теперь, когда вы все это знаете - рассмотрим несколько примеров.

Как убрать отступы по краям HTML-страницы

Пример HTML и CSS: убираем отступы у тега BODY

Содержимое страницы.

Описание примера

Описание примера

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

Как убрать отступы у таблицы

Пример HTML и CSS: убираем отступы между ячейками таблицы

Ячейка 1.1	Ячейка 1.2
Ячейка 2.1	Ячейка 2.2

Ячейка 1.1	Ячейка 1.2
Ячейка 2.1	Ячейка 2.2

Ячейка 1.1	Ячейка 1.2
Ячейка 2.1	Ячейка 2.2

Описание примера

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

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

В общем, как видите, оба этих способа помогают убрать отступы в таблице, просто делают это немного по-разному.

При создании блока со списком ссылок обычно рекомендуется использовать свойство display с атрибутами block или inline-block , что позволит увеличить размер активного поля ссылки. Большие активные поля ссылок улучшают юзабилити элементов, по крупным элементам проще попасть мышью.

Элементы с display: block отображается как блочный.

Элемент с display: inline-block отображается как блочный элемент, который обтекается другими элементами, как встроенный. Содержимое отформатировано как блочный элемент, а сам элемент отформатирован как встроенный.

Рассмотрим простой пример со списком ссылок:

• This little
• piggy went to
• market

Если не изменять стиль ссылок, то размер их активных полей соответствую размеру текста внутри них.

Мы можем это улучшить, сделав размер активного поля по ширине родительского элемента.

Ul a { display: block; }

Мы можем сделать ещё лучше.

1. Убедитесь, что у элементов списка отсутствуют поля, в отличии от ссылок.
2. Ссылки не имеют внешних отступов, так как эти отступы не являются активной областью элементов.

ul li { padding: 0; margin: 0; } ul a { padding: 5px; display: block; }

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

Оригинал статьи: Keep Margins Out of Link Lists By: Chris Coyier on 11/29/2010

В этой статье я хотел бы рассказать, как правильно расставлять поля (padding) и отступы (margin) в CSS.

Прежде всего давайте вспомним определение полей и отступов согласно спецификации W3C . В боксовой модели (box model) поля - это расстояние между контентом (content) и границей блока (border). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.

Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина (width) и высота (height) элемента не заданы и не изменен алгоритм расчета размеров контента с помощью свойства box-sizing .

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

Теперь давайте рассмотрим как правильно расставлять поля и отступы между элементами. Возьмем в качестве примера следующий блок.

Это блок новостей news . Он состоит из заголовка, списка новостей и ссылки «Другие новости». Дадим им следующие названия классов: news__title , news__list и news__more-link .

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

News { padding: 20px 25px; }

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

Часто бывает так, что все элементы внутри блока имеют одинаковые отступы слева и справа, кроме одного, который вообще не должен иметь отступов, например, из-за фона. В этом случае для элемента можно задать отрицательные отступы. Тогда не придется убирать поля внутри блока для остальных элементов.

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

Учитывая это, задаем для заголовка отступ снизу, а для ссылки «Другие новости» отступ сверху.

News__title { margin-bottom: 10px; } .news__more-link { margin-top: 12px; }

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

News__list { margin: 10px 0 12px 0; }

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

Можно задать для каждой новости кроме первой отступ сверху, либо для каждой новости кроме последней отступ снизу. Первый вариант более предпочтителен, поскольку псевдоселектор:first-child был добавлен в спецификации CSS 2.1 и имеет более широкую поддержку, в отличие от псевдоселектора:last-child , который был добавлен только в спецификации CSS версии 3.0 .

News__list-item { margin-top: 18px; } .news__list-item:first-child { margin-top: 0; }

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

Иногда мы не можем опираться на обязательные элементы. Например, у нас есть всплывающее окошко popup , внутри которого может выводиться какой-то заголовок и текст. Причем в каких-то случаях может не быть текста, а в каких-то и заголовка. То есть оба элемента являются опциональными.

В этом случае можно использовать следующий способ задания отступов.

Popup__header + .popup__text { margin-top: 15px; }

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

Схлопывание вертикальных отступов

Еще один нюанс, о котором не все знают, связан с вертикальными отступами между соседними блоками. В определении отступов, которое я приводил выше, сказано, что отступ - это расстояние между границами текущего и соседнего блока. Таким образом, если мы расположим два блока друг под другом и зададим одному из них отступ снизу в 30px , а другому отступ сверху в 20px , отступ между ними будет не 50px , а 30px .

То есть произойдет наложение отступов, и отступ между блоками будет равен наибольшему отступу, а не сумме отступов. Этот эффект также называют «схлопыванием».

Прошу заметить, что горизонтальные отступы, в отличие от вертикальных, не «схлопываются», а суммируются. Поля (padding) также суммируются.

Зная о «схлопывании» отступов, мы можем использовать эту особенность в свою пользу. Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px , а для заголовка второго уровня отступ сверху 20px и снизу 10px , а для всех параграфов зададим отступ сверху 10px .

H1 { margin-bottom: 24px; } h2 { margin-top: 24px; margin-bottom: 12px; } p { margin-top: 12px; }

Теперь заголовок h2 можно расположить как после заголовка h1 , так и после параграфа. В любом случае отступ сверху не будет превышать 24px .

Общие правила

Подводя итог, я бы хотел перечислить правила, которых я придерживаюсь при расстановке полей и отступов.

1. Если соседние элементы имеют одинаковые отступы, то лучше задавать их родительскому контейнеру, а не элементам.
2. При задании отступов между элементами, следует учитывать, обязательный это элемент или опциональный.
3. Для списка однотипных элементов - не забывать о том, что число элементов может варьироваться.
4. Помнить о наложении вертикальных отступов и использовать эту особенность там, где она принесет пользу.

Теги: Добавить метки

Похожие статьи