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 после всех вышеизложенных ухищрений соизволили просто уменьшить отступы с трех пикселей до одного!

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


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;
}

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

На это все.


cssinline

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.

Размер отступа, необходимый для удаления пробела
Fontsize:
9px
Margin value (em)
-0.24 -0.25 -0.26 -0.27 -0.28 -0.32 -0.34
Chrome 32.0
Firefox 26.0
IE 10.0
Safari 7.0.1
Opera 12.16
Размер отступа, необходимый для удаления пробела
Fontsize:
standard
Margin value (em)
-0.24 -0.25 -0.26 -0.27 -0.28 -0.32 -0.34
Chrome 32.0
Firefox 26.0
IE 10.0
Safari 7.0.1
Opera 12.16
Размер отступа, необходимый для удаления пробела
Fontsize:
72px
Margin value (em)
-0.24 -0.25 -0.26 -0.27 -0.28 -0.32 -0.34
Chrome 32.0
Firefox 26.0
IE 10.0
Safari 7.0.1
Opera 12.16

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

display: inline-block в IE

Синяя линия в увеличенном блоке — это выделение в 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

Разрешите представить вам перевод статьи «Cross-Browser Inline-Block», написанной Райном Доэрти холодным февралем 2009 года. В статье рассказывается о верстке элементов списка с установкой для свойства display значения inline-block. Статья об этом, а также о трудностях, возникающих в процессе достижения результата и о методах их «лечения».

Inline-block, заманчивое значение для свойства display, которое обещает очень много, а выполняет совсем мало. Очень часто я получал PSD-файлы, подобные этому:


и плакал.

Обычно такой способ отображения не вызывает проблем. Фиксированная ширина, фиксированная высота, float: left и готово. Если бы не одно, но! Дизайн должен отображаться корректно при любом количестве содержимого. В нашем случае, если в одном из блоков окажется чуть больше данных, то он «сломает» всю сетку.

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

Начнем с простого примера, где у пунктов списка для свойства display установлено значение inline-block:

<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>

Результат выглядит корректно в Firefox 3, Safari 3 и в Opera:

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

А происходит здесь следующее, базовая линия (baseline) каждого элемента <li> выравнивается с базовой линией родительского элемента <ul>. Вы спросите, что такое базовая линия? Лучше один раз увидеть, чем сто раз услышать:

Базовая линия на рисунке выше обозначена линией, идущей через основание символов. Значением по-умолчанию для свойства vertical-align у inline и inline-block элементов является baseline. Это значит, что базовая линия элементов выравнивается с базовой линией родителя. На рисунке ниже представлен пример такого выравнивания:

Как видите, каждая базовая линия блоков на рисунке выше выравнена по базовой линии текста «This is the baseline», который не является элементом <li>. Это просто текстовый узел, находящийся непосредственно в <ul>, помещенный туда в качестве индикатора расположения базовой линии элемента <ul>.

Получить желаемый изначально вариант выравнивания довольно просто, достаточно для свойства vertical-align указать значение top и получить в результате отличную сетку:

Вот только это не работает в Firefox 2, IE 6 и 7:

Для начала займемся Firefox 2.

Firefox 2 не поддерживает значение inline-block, зато отлично понимает специфичное для Мозиллы значение -moz-inline-stack для свойства display. Оно приводит к результатам, подобным действию inline-block. Когда мы добавляем его перед display: inline-block, то Firefox 2 игнорирует вышеуказанное, так как не понимает его, и использует -moz-inline-stack. Другие браузеры используют inline-block, игнорируя непонятное для них -moz-inline-stack.

<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>.

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

Теперь перейдем к IE 7. Он тоже не поддерживает inline-block, но мы можем использовать трюк, благодаря которому элементы <li> будут выводиться на экран так, будто используют значение inline-block. Как? Будем использовать hasLayout, волшебное свойство IE, делающее доступными многие манипуляции. Вы не можете явно указать для элемента hasLayout: true или сделать это каким-либо подобным простым образом, однако можете запустить механизм, указав zoom: 1.

Технически элементы с hasLayout, установленным в значение true сами отвечают за рендеринг самих себя и дочерних элементов. Объедините это с min-height и width, и получите результат, очень близкий к display: block. Это как магический порошок, заставляющий исчезать все появляющиеся при отображении проблемы.

Когда мы добавим zoom: 1 и *display: inline (звездочка является хаком для IE 6 и IE 7) для элементов <li>, то научим IE 7 отображать их совсем как inline-block:

<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>

Почти готово. Остался лишь IE 6:

IE 6 не поддерживает min-height, но взамен мы можем использовать его неверное обращение к свойству height. Установим для _height (обратите внимание на подчеркивание спереди) значение в 250px и получим все элементы <li> с нужной высотой. Если же содержимое превысит указанную величину, то просто растянет свой контейнер. Все остальные браузеры проигнорируют _height.

Финальный CSS и HTML выглядит так:

<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>

как убрать промежутки между inline блоками?

Как убрать пространство между элементами inline-block. Рассмотрим несколько вариантов решения этой задачи.

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


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

Выделим элементы списка красным фоном для наглядности


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

Откройте демо-пример, для просмотра результатов работы разных подходов:

Пример №2 – inline блоки с разметкой блок в блок

Если вы находите этот метод для вас удобным, то он весьма рабочий и кроссбраузерный. Записав верстку элементов с inline-block в один ряд мы добьемся решения проблемы с whitespace`ом между блоками.


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

Пример №3 – inline блоки с font-size:0;

Если добавить родительскому элементу (ul) font-size:0; а самим элементам списка (li) задать нормальный размер шрифта, то тем самым мы уберем промежуток между блоками.


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

Но у этого способа могут возникнуть проблему на платформе Android и при задании размера в процентах или em.

Пример №4 – inline блоки с letter-spacing:-4px;

Подход тот же что и с размером шрифта, задаем отрицательное значение для родителя и нулевое для потомков.


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

Пример №5 – inline блоки с не закрытым тегом li


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

Этот вариант работает, но он справедлив для тега li c другими такой вариант не пройдет.

Пример №6 – использовать float вместо inline

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


ul li {float: left;}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *