Как мне избежать заполнения строк?

Question

Моя самая большая проблема с HTML заключается в том, что разрывы строк добавляют крошечное пространство между элементами. ( jsFiddle.)

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

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

<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</div><!--
-->

Это работает, но я чувствую, что должно быть лучшее решение. Какие еще есть способы обойти отступы строки?

Answer 1

Это не "немного места", а буквально космический персонаж. Ты используешь display: inline-block выровнять ваши элементы по горизонтали, и вот как работает "встроенный".

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

В противном случае вы можете использовать один из других методов для горизонтального выравнивания, например, плавающий или display: table-cell,

Answer 2

Вы должны попробовать font-size:0px; line-height:0px для внешнего div.

Что-то вроде этого:

<div class="outer">
  <div class="inner">123</div>
  <div class="inner">34556</div>
</div>

<style>
.outer {
  font-size:0px;
  line-height:0px;
}

.inner {
  font-size:14px;
  line-height:16px;
  display:inline-block;
}
</style>

Answer 3

Это потому что вы используете display: inline-block; для div элементы.

Блочные элементы окружают пустое пространство, а встроенные элементы - нет.

Пытаться float: left; вместо.

Answer 4

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

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