• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Удалить пробел на блочно-строчном элементе (Удаление пробелов между блочно-строчными элементами CSS)
Удалить пробел на блочно-строчном элементе
Kosten
Дата: Суббота, 2018-12-29, 22:25 | Сообщение 1
Администраторы
Сообщений:23402
Награды: 56


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

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

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


Также рассмотрим способы обработки пространства между элементами inline-block



Встроенный блок / ошибка пробела

Оригинал

HTML

Код
<ul>
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
</ul>


Исправленный и отформатированный код

Код
<ul>
  <li>
   Один</li><li>
   Два</li><li>
   Три</li>
</ul>

Исправлена ошибка с исчезновением/появлением комментариев

Код
<ul>
  <li>Один</li><!--
  --><li>Два</li><!--
  --><li>Три</li>
</ul>


Исправлено CSS margin-right: -4px;

Код
<ul class="white-space-fix">
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
</ul>


CSS

Код
li {
  background: slategrey;
  display: inline-block;
  zoom: 1;
  *display: inline;
  padding: 4px;
  color: white
}

ul.white-space-fix li {
  margin-right: -4px;
}


Демонстрация
Прикрепления: 1593924.png(6.7 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Удалить пробел на блочно-строчном элементе (Удаление пробелов между блочно-строчными элементами CSS)
  • Страница 1 из 1
  • 1
Поиск: