如何在没有过多评论的情况下摆脱空白？答案

【问题标题】：How to get rid of whitespace without excessive comments?如何在没有过多评论的情况下摆脱空白？
【发布时间】：2011-03-19 21:59:20
【问题描述】：

这是我页面中的代码 sn-p：

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

那些空白 cmets 是为了摆脱分隔线每一侧的空白。这真的是唯一的方法吗？必须有一个更优雅的解决方案。

【问题讨论】：

可以把标记放在同一行。

标签： html css whitespace

【解决方案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>

【讨论】：

【解决方案2】：

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

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

（没有 hack 的演示文稿：http://jsfiddle.net/simevidas/mLZYW/）

【讨论】：

【解决方案3】：

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

定位或浮动的东西几乎总是会删除不需要的空白，例如，如果您的 .vdivider 应该是垂直分隔线/新行，您可以在 input 之前使用 display:block 并移除该元素及其周围的 cmets。

【讨论】：

我确实这样做了，因为我有两个彼此相邻的表单（搜索和注册/登录）并且它们在同一行。
@John Smith 那就解释一下 :-) 顺便说一句，我不记得上次遇到空格问题是什么时候了，我想我下次想要元素时倾向于浮动元素彼此，这也是我在你的情况下可能会做的事情。根据您的浏览器需求，您还可以使用 display:inline-block 之类的东西。

【解决方案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>

【讨论】：