과도한 논평없이 공백을 제거하는 방법?

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

고려할 수있는 한 가지 옵션 - 가능하면 템플릿 엔진을 사용하십시오.

이

{* 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 해킹을 사용할 수 있습니다 예를 들어, Smarty에, 정확히이 일을 수행하는 {strip} 기능이있다. 기본적으로 부모 요소에 font-size:0을 설정하고 하위 요소에 font-size를 명시 적으로 설정합니다.

라이브 데모 :http://jsfiddle.net/simevidas/mLZYW/1/

(해킹없이 프리젠 테이션 : http://jsfiddle.net/simevidas/mLZYW/)이 약 또는 요소를 인라인 옆에있을 때

Answer 3

공백은 너무 적어도 양식에 대한 당신하지는 보여줍니다 그것을 필요로합니다 (당신이 양식을 display:inline ...으로 설정하지 않았다면).

위치 또는 예를 들어 당신의 .vdivider가 수직 분할/새 줄을 것으로 예상되는 경우, 그래서 거의 항상 일을 떠 당신이 그냥 전에 input에 display:block를 사용하고 해당 요소를 제거 할 수 있습니다, 원치 않는 백색 공간을 제거하고 주위에 댓글.

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>