Отступы между элементами при display: inline-block | Все что вы хотели знать о хостинге и сайтостроении

Отступы между элементами при display: inline-block


Рубрика: CSS, HTML

Исходные данные!

Приведу сначала небольшой код:

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

И CSS

ul, li{
  margin: 0;
  padding; 0;
  list-style: none;
}

li{
 display: inline-block;
}

 

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

Как решить?

Для того что-бы избавится от зазоров нам нужно элементу UL указать нулевой размер шрифта , этого можно добиться добавив всего одну строчку для элемента UL:

ul{
  font-size: 0;
}

Почему это происходит?

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

 Как говорится век живи, век учись.

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

Если вам понравилась статья или была полезна, поделитесь ею с друзьями: