How to get rid of whitespace without excessive comments? - html

Question

Here is a code snippet from my page:
<input value="Search" type="submit" /><!-- whitespace
--><span class="vdivider"></span><!-- whitespace
--></form><!-- whitespace
--><form action="login_action.php" method="post"><!-- whitespace
--><?php
Those whitespace comments are to get rid of the whitespace on each side of the divider. Is this really the only way of doing this? There has to be a more elegant solution.

Answer 1

One option to consider - use a templating engine if you can. For example, in Smarty, there's a {strip} function that does exactly this:
{* 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}
Output:
<table border='0'><tr><td><a href="http://. snipped...</a></td></tr></table>

Answer 2

You can use the font-size:0 hack. Basically, you set font-size:0 on the parent element, and set the font-size explicitly on the children.
Live demo: http://jsfiddle.net/simevidas/mLZYW/1/
(Presentation without hack: http://jsfiddle.net/simevidas/mLZYW/)

Answer 3

White-space only shows when it is around or next to inline elements, so at least for the forms you don´t need it (if you haven´t set your forms to display:inline...).
Positioning or floating things almost always removes the unwanted white-spaces, so for example if your .vdivider is supposed to be a vertical divider / new line, you can just use display:block on the input before it and remove that element and the comments around it.

Answer 4

Whitespace between elements (including newlines and tabs) cause browsers to insert spaces where there should be none.
The most elegant method that I've seen used to get around this issue is putting the > on the next line, instead of on the same line. This way, it's still legal html, and you can still keep it pretty.
For example:
<input value="Search" type="submit" />
<span class="vdivider"></span>
</form><form action="login_action.php" method="post">
<?php>
would become:
<input value="Search" type="submit"
/><span class="vdivider"></span
></form><form action="login_action.php" method="post"
><?php>