Как удалить "Невидимое пространство" из HTML

Возможный дубликат:
Пространство между списками элементов Inline-Block

У меня есть JSFiddle demo моего html-кода. Вот код здесь:

<span style="display: inline">Hello Wo</span>
<span style="display: none;"></span>
<span style="display: inline">rld</span>​

Проблема, с которой я сталкиваюсь, заключается в том, что добавляется дополнительное пространство между "o" и "r" в Hello World!. Стиль display не установлен, так что кто-то может сказать мне, как я могу получить фразу Hello World! без пробела?

Ответы

Ответ 1

Разрушения строк вызывают его - http://jsfiddle.net/RhvjF/1/

Не удается найти конкретный пост, но умные люди предложили 3 способа его исправления:

  • Поместите все в одну строку (удалите все разрывы строк)

  • Прокомментируйте разрывы строк, например

    <span style="display: inline">Hello Wo</span><!--
--><span style="display: none;"></span><!--
--><span style="display: inline">rld</span>

  • Установите контейнер font-size на 0 и переустановите его для span -s

UPDATE

Есть как минимум еще два способа:

  • Разбить теги, например

    <span style="display: inline">Hello Wo</span
><span style="display: none;"></span
><span style="display: inline">rld</span>
  • Поплавок элементов, т.е. span { float: left }

Ответ 2

Это вызвано разрывами строк. У вас есть два варианта:

  • Удалить разрывы строк
  • Плавайте свой контент.

Вариант 1

<span style="display: inline">Hello Wo</span><span style="display: none;"></span><span style="display:inline">rld</span>​

Вариант 2

<style>
    #spanContainer > span { float:left; }​
</style>

<div id="spanContainer">
    <span style="display: inline">Hello Wo</span>
    <span style="display: none;"></span>
    <span style="display: inline">rld</span>​
</div>

Ответ 3

См. http://jsfiddle.net/RhvjF/2/

HTML:

<div id="wrapper">
    <span style="display: inline">Hello Wo</span>
    <span style="display: none;"></span>
    <span style="display: inline">rld</span>
</div>

CSS

#wrapper{
    font-size:0;
}
#wrapper>*{
    font-size:16px; /* Or whatever you want */
}