Display inline block убрать отступы – Как убрать пробелы между блоками (div)? И можно ли последние 3 блока поднять вверх без margin?

Долой отступы между строчными элементами (и блоками)

Автор: Александр Головко Дата публикации: 12.11.2010

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

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

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

	<ul>
		<li>Стороки.</li>
		<li>Просто</li>
		<li>строки</li>
	</ul>

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

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

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

Проблема

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

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

Кого лечим?

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

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

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

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

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

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

	<ul>
		<li>Стороки.</li><li>Просто</li><li>строки</li>
	</ul>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Побороть webkit’ы получилось с помощью letter-spacing:-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 невалидно. Поэтому в боевых условиях выноси его и хак для IE в отдельный CSS, подключаемый с помощью условных комментариев.

Демонстрационный пример

Проверено в:

• IE 6-8
• Firefox 3.5
• Opera 9.5-10.5
• Safari 4
• Chrome 7

Элемент inline — пять способов убрать отступ – Zencoder

При оборачивании изображения в блок div внизу картинки возникает странный отступ.

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

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

Пять способов убрать отступ под картинкой

Создаем блок div с классом .image, для которого назначаем ширину, центрирование и границу для наглядности. Внутрь блока div.image помещаем картинку:

<div>
  <img src="img/charlize_theron.jpg" alt="Charlize Theron">
</div>

.image {
  border: 2px solid #000;
  width: 307px;
  margin: 0 auto;
}

Видим этот отступ под изображением:

1. Сделать элемент img блочным

.block {
  display: block;
}

2. Задать вертикальное выравнивание

Так как элемент img является строчным inline, то к нему применимо свойство vertical-align, как к любому строчному элементу. Мне такой способ нравиться больше всего:

.vertical {
  vertical-align: top;
}

3. Сделать элемент плавающим через float

Задать для элемента img свойство float: left или float: right. Если элемент делается плавающим через float, то из строчного inline он становится блочным block.

И отступ также пропадает. Только надо не забыть добавить для контейнера div.image свойство overflow: hidden, иначе пропадет граница вокруг изображения.

Что и понятно, так как при float: left или float: right элемент “вырывается” из общего потока, становится плавающим:

.float {
  float: left;
}

4. Сделать картинку таблицей

Для изображения задать свойство display: table:

.table {
  display: table;
}

5. Задать высоту для блока

Для блока-контейнера div.image жестко задать высоту, равную высоте изображения. В моем случае высота картинки равна 230 пикселей, поэтому и для блока-обертки задаю такую же — 230 пикселей:

.height {
  height: 230px;
}

Все пять способов проверены мною и должны работать в реальности.

На это все.

Display: inline-block

Для того, чтобы элементы на странице располагались друг за другом мы можем использовать свойство dislpay: inline-block. Этот способ завоевал популярность как альтернатива использованию свойства float. В этой статье мы рассмотрим, как использовать inline-block и как справиться с проблемами, которые он вызывает.

Основы

HTML-элементы могут быть «блочными» или «инлайновыми». Блок inline-block ведет себя как сочетание того и другого. На самом деле это инлайновый элемент, который внутри ведет себя как блочный. Чтобы лучше понять свойства inline-block элементов, давайте взлянем на характеристики блочных и инлайновых элементов.

Инлайновые элементы:

• Имеют значение свойства display равное inline
• Имеют ширину равную ширине содержимого
• Выстраиваются друг за другом горизонтально
• Вертикальные отступы не могут быть заданы
• Высота и ширина не могут быть заданы
• Для управления позиционированием могут быть использованы свойства direction и text-align
• Левый и правый отступы могут использоваться для управления горизонтальным позиционированием
• Свойство vertical-align может быть использовано для управления вертикальным позиционированием

Блочные элементы:

• Свойство display имеет значение block, list-item или table
• По умолчанию имеют ширину равную ширине внутренней области своего контейнера
• Выстраиваются друг за другом вертикально
• Могут быть заданы высота и ширина
• Отступы могут быть использованы для управления позиционированием

Display: inline-block

Мы можем объединить блочное и инлайновое поведение, задав блоку значение свойства display равное inline-block.

a { display: inline-block; }

Internet Explorer 6 и 7 не поддерживают значение inline-block для элементов, которые не являются инлайновыми по умолчанию. Для таких случаев есть простое решение:

div {
    display: inline-block;
    *zoom: 1; /* trigger hasLayout for IE7 and below */
    *display: inline; /* the star targets only IE7 and below */
}

После этого блоки будут иметь следующие характеристики:

• Блоки выстраиваются друг за другом горинтально
• Могут быть определены высота и ширина
• Отступы можно использовать для управления позиционированием
• Свойство vertical-align может быть использовано для управления вертикальным позиционированием

Для чего используется inline-block

Вы можете задать блоку значение display: inline-block, если необходимо задать ширину/высоту или вертикальные отступы, и при этом блок должен остаться инлайновым. Также такой прием имеет ряд преимуществ по сравнению со свойством float, например:

• Элементы остаются частью потока, поэтому не требуются clearfix’ы
• Мы можем больше контролировать вертикальное выравнивание, используя свойство vertical-align и задавая ему значения top, middle или bottom
• Не требуется дополнительная разметка, когда колонки имеют содержимое разной высоты
• Центрирование колонок можно выполнить как с помощью отступов, так и с помощью свойства text-align: center

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

Есть несколько способов удаления таких отступов. Я привел их ниже.

Удаление пробелов

<ul>
    <li>Lorem.</li><li>Sapiente!</li><li>Repudiandae?</li><li>Veniam!</li><li>Dolorum.</li>
</ul>

Пробелы внутри тегов

<ul>
  <li>Lorem.</li><li>
  Sapiente!</li><li>
  Repudiandae?</li><li>
  Veniam!</li><li>
  Dolorum.</li>
</ul>

Пробелы в комментариях

<ul>
  <li>Lorem.</li><!--
--><li>Sapiente!</li><!--
--><li>Repudiandae?</li><!--
--><li>Veniam!</li><!--
--><li>Dolorum.</li>
</ul>

Обнуление размера шрифта

ul {
  font-size: 0;
}
ul li {
  display: inline-block;
  font-size: 16px;
}

Этот метод заключается в установке размера шрифта в ноль. Размер пробелов зависит от размера шрифта, так что, когда мы устанавливаем размер шрифта в ноль — пробелы исчезают. Это решение осложняется при работе с относительными единицами, такими как em’ы, поскольку, если размер шрифта родителя равен нулю, все значения, основанные на em, так же будут равны нулю. Однако это работает с rem’ами. Кажется, это решение не совсем работает в Android. Я проверял в Android версий 2.2, 2.3.3, 4.1, 4.2 и 4.3 и в каждом их них находилась ошибка. Android 2.2 и 2.3.3 похоже полностью игнорируют размер шрифта. В Android 4.1, 4.2 и 4.3 пробелы исчезают не полностью. Строка из трех блоков (по 1/3) работает как ожидается, но в строке из 4 блоков (по 1/4) последний блок сдвигается на строку ниже.

Отрицательный правый отступ

li {
  display: inline-block;
  margin-right: -0.25em;
}

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

Невидимый шрифт

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

Открытые теги

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

<ul>
  <li>One
  <li>Two
  <li>Three
</ul>

Это может быть не самое красивое решение, но оно проходит HTML-валидацию (не XHTML).

Удаление пробелов с помощью JavaScript

Удалить пробелы также можно с помощью JavaScript: http://codepen.io/hucklesby/pen/sDGaC

Оптимальные размеры отступов для удаления пробелов

Каков оптимальный размер правого отступа, чтобы убрать пробелы в разных браузерах? Я сделал несколько тестов, чтобы найти оптимальное значение для пяти основных настольных браузеров. Для этого я создал простой простой макет с двумя инлайн-блок колонками, убирав пробелы с помощью отрицательного правого отсупа. Затем я просматривал страницу с различными значениями отступа, размера шрифта и в разном масштабе. Я также обнаружил, что изменение ширины окна браузера также играет роль, делая пробелы видимыми или нет. Если при каком-то масштабе пробелы становились видимыми — браузер не проходил тест с этим отступом. Когда не было видно пробелов при любом значении отступа, я отмечал, что браузер «прошел тест» с данным отступом. В таблице ниже приведены размеры отступов, для которых бразуеры прошли тест.

Все браузеры, кроме Internet Explorer, были протестированы на OSX 10.9.1. Internet Explorer использовался на OC Windows 8 Pro.

Значения отрицательного отступа находятся в диапазоне от −0.24em до −0.34em. Это покрывает большинство популярных десктопных браузеров и размер шрифта от 9px до 72px. Теперь давайте посмотрим, что происходит, если мы установим правый отстум в −0.32em и откроем страницу в IE, для которого необходимо значение −0.24em.

Синяя линия в увеличенном блоке — это выделение в IE developer tools. Оно показывает, что правый блок перекрывает левый больше чем на пиксель (0.32 — 0.24 * 16 = 1.28px).

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

Сетка с использованием inline-block

Давайте взглянем на inline-block в действии по поробуем создать сетку с его помощью. Для удаления пробелов я использовал HTML-комментарии. Первая строка показывает блоки, вертикально выровненные по центру. По умолчанию inline-block элементы имеют значение свойства vertical-align: middle. Строки 3 и 4 показывают поведение блоков с vertical-align: top и vertical-align: bottom. Центрирование элемента по горизонтали сделано с помощью свойства text- align: center, заданного контейнеру (.grid).

<div>
    <div>
      <div>1/4</div>
    </div><!--

 --><div>
      <div>1/4</div>
    </div><!--

 --><div>
      <div>1/4</div>
    </div><!--

 --><div>
      <div>1/4</div>
    </div><!--

 --><div>
      <div>1/3</div>
    </div><!--

 --><div>
      <div>1/3</div>
    </div><!--

 --><div>
      <div>1/3</div>
    </div><!--

 --><div>
      <div>1/4</div>
    </div><!--

 --><div>
      <div>1/4</div>
    </div><!--

 --><div>
      <div>1/4</div>
    </div><!--

 --><div>
      <div>1/4</div>
    </div><!--

 --><div>
      <div>1/4</div>
    </div><!--

 --><div>
      <div>1/4</div>
    </div><!--

 --><div>
      <div>1/4</div>
    </div><!--

 --><div>
      <div>1/4</div>
    </div><!--

  --><div>
       <div>2/4</div>
     </div><!--

  --><div>
       <div>2/4</div>
    </div><!--

  --><div>
       <div>2/4</div>
     </div>
</div><!-- end of .grid -->




/**
 * General
 */

/* Changing the box-model to border-box*/

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

/**
 * Grid
 */

.grid {
  text-align: center;
  padding: 0 0 0 1.25em;
}
.grid-cel {
  display: inline-block;
  padding: 0 1.25em 0 0;
  text-align: left;
  *zoom: 1;
  *display: inline;
}

/* Vertical alignment */

.grid-cel.top {
  vertical-align: top;
}
.grid-cel.bottom {
  vertical-align: bottom;
}

/* Thirds */

.thirds-1 {
  width: 33.333333%;
}

/* Fourths */

.fourths-1 {
  width: 25%;
}
.fourths-2 {
  width: 50%;
}

.fourths-2.left {
  margin-right: 50%;
}
.fourths-2.right {
  margin-left: 50%;
}

/**
 * Content
 */

.module {
  margin: 0 0 1.25em;
  text-align: center;
  line-height: 4.166666666666667;
  background-color: #dedede;
}

/* Simulate content height */
.grid-cel:nth-child(2) .module,
.grid-cel:nth-child(10) .module,
.grid-cel:nth-child(14) .module {
  line-height: 5.555555555555555;
}
.grid-cel:nth-child(3) .module,
.grid-cel:nth-child(9) .module,
.grid-cel:nth-child(13) .module {
  line-height: 6.944444444444445;
}
.grid-cel:nth-child(4) .module,
.grid-cel:nth-child(8) .module,
.grid-cel:nth-child(12) .module {
  line-height: 8.333333333333334;
}

Дополнительная информация

Некоторые CSS-фреймворки для сетки вместо float используют inline-block. Для примера, можно посмотреть Inuit или Griddle.

Кроссбраузерный inline-block / Habr

<ul>
    <li>
        <h5>This is awesome</h5>
        <img src="1450821541436477177797"
        alt="lobster"/>
    </li>
...
<ul>

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: inline-block;
        margin: 5px;
    }
</style>

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
    }
</style>

<li>
        <div>
            <h5>This is awesome</h5>
            <img src="1450821541436477177797"
            alt="lobster"/>
        </div>
</li>

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
    }
</style>

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }
</style>

<li>
        <div>
            <h5>This is awesome</h5>
            <img src="1450821541436477177797"
            alt="lobster"/>
        </div>
</li>

<ul>
  <li>Элемент списка №1</li>
  <li>Элемент списка №2</li>
  <li>Элемент списка №3</li>
  <li>Элемент списка №4</li>
</ul>

#content li {
	display: inline-block;
	background: #f00;
	padding: 3px;
}

<ul>
   <li>Элемент списка №1</li
  ><li>Элемент списка №2</li
  ><li>Элемент списка №3</li
  ><li>Элемент списка №4</li>
</ul>

ul {font-size:0}
ul li {font-size:16px;}

ul {letter-spacing: -4px;}
ul li {letter-spacing: 0;}

<ul>
  <li>Элемент списка №1
  <li>Элемент списка №2
  <li>Элемент списка №3
  <li>Элемент списка №4
</ul>

ul li {float: left;}