如何在没有过多注释的情况下消除空格？

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

您可以使用font-size:0 hack。基本上，您在父元素上设置 font-size:0 ，并在子元素上显式设置 font-size 。

现场演示： http://jsfiddle.net/simevidas/mLZYW/1/

（没有破解的演示：http://jsfiddle.net/simevidas/mLZYW/）

Answer 3

空白仅在在内联元素周围或旁边时显示，因此至少对于您不需要的表单（如果您尚未将表单设置为 display:inline... ）。

定位或浮动内容几乎总是会删除不需要的空白，因此，例如，如果您的 .vdivider 应该是垂直分隔符/换行符，则只需使用 display:block code> 放在其前面的 input 上，并删除该元素及其周围的注释。

Answer 4

元素之间的空格（包括换行符和制表符）会导致浏览器在不应该有空格的地方插入空格。

我见过的解决此问题的最优雅的方法是将 > 放在下一行，而不是同一行。这样，它仍然是合法的 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>