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

Question

Вот фрагмент кода с моей страницы:

<input value="Search" type="submit" /><!-- whitespace
--><span class="vdivider"></span><!-- whitespace
--></form><!-- whitespace
--><form action="login_action.php" method="post"><!-- whitespace
--><?php

Эти пробельные комментарии должны избавиться от пробелов с каждой стороны разделителя.Это действительно единственный способ сделать это?Должно быть более элегантное решение.

Answer 1

Один вариант для рассмотрения - используйте шаблонизатор, если можете.Например, в Smarty есть функция {strip} , которая делает именно это:

{* the following will be all run into one line upon output *}
{strip}
<table border='0'>
 <tr>
  <td>
   <a href="{$url}">
    <font color="red">This is a test</font>
   </a>
  </td>
 </tr>
</table>
{/strip}

Вывод:

<table border='0'><tr><td><a href="http://. snipped...</a></td></tr></table>

Answer 2

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

Самый элегантный метод, который я когда-либо использовал, чтобы обойти эту проблему, это поставить > на следующей строке, а не на той же самой.Таким образом, это все еще легальный html, и вы все равно можете сохранить его красивым.

Например:

<input value="Search" type="submit" />
    <span class="vdivider"></span>
    </form><form action="login_action.php" method="post">
    <?php>

станет:

<input value="Search" type="submit" 
    /><span class="vdivider"></span
    ></form><form action="login_action.php" method="post"
    ><?php>

Answer 3

Пробел отображается только тогда, когда он находится рядом или рядом со встроенными элементами, поэтому, по крайней мере, для форм вам это не нужно (если вы не установили свои формы на display:inline ...).

Позиционирование или перемещение объектов почти всегда удаляют нежелательные пробелы, поэтому, например, если ваша .vdivider должна быть вертикальной разделительной линией / новой строкой, вы можете просто использовать display:block на input перед нейи удалите этот элемент и комментарии вокруг него.

Answer 4

Вы можете использовать font-size:0 взломать. По сути, вы устанавливаете font-size:0 для родительского элемента и явно указываете размер шрифта для дочерних элементов.

Демонстрационная версия: http://jsfiddle.net/simevidas/mLZYW/1/

(Презентация без взлома: http://jsfiddle.net/simevidas/mLZYW/)