PHP代碼換行符'\ n`導致元素之間的差距

我在迴應一系列使用PHP的HTML元素。我使用\n導致代碼換行，使源代碼更加有組織和清晰。PHP代碼換行符' n`導致元素之間的差距

由於某些原因，在特定位置使用\n正在導致HTML元素之間的神祕間隙。在螢火蟲中，這個差距並不表現爲邊緣或填充，而只是一個缺口。

這裏是有問題的PHP：

注：如你所見，我已刪除所有標籤中的PHP的，因爲我敢肯定它是不相關的這個問題。

echo '<ul ... >'."\n"; 
while($row = mysql_fetch_assoc($result_pag_data)) { 

    echo '<li><a ... >'."\n". 
       '<img ... >'."\n". 
      '</a></li>'."\n"; <---- THIS IS THE \n THAT SEEMS TO BE CAUSING THE GAP 
} 
echo '</ul>'."\n";

你有沒有見過類似這樣的事情，與PHP換行符相關的表現差距？如果是這樣，它的原因是什麼？

在我的代碼中使用\n真的很重要嗎？

來源

2011-10-20 stefmikhail

這很正常。 A \n換行符在HTML中沒有意義，所以它被解釋爲空格字符。如果你不希望這種差距，然後消除\n，或重寫HTML，所以它不是有關：

<li><a ...><img ...></a></li>

作爲一般規則，它可以包含文本通過應該不會有一行的結束標記標籤他們自己，就是這個原因。

繼續您的'哪裏可以\ n'的問題。這歸結爲個人喜好，但我傾向於格式化我的HTML這樣的：

<table> 
<tr> 
    <td><a href="some big long ugly url"> 
      <img ....></a></td> 
</tr>

由於<tr>不能包含自身的任何文本（在有效的HTML），它的確定放在自己的路線。但是</a>和</td>都是可以包含文本的標籤，所以我把它們放在'文本'（在這種情況下爲img標籤）的末尾，這樣幻影換行咒語（即將到來的星球大戰掠奪附近你）不能罷工。

當然，請注意，我的示例在開始的<a>和<img>標記之間確實存在換行符和縮進，所以這是另一個「必須緊靠每個」其他佈局的另一個地方會導致間隙。如果你需要一系列排列起來的東西來打擊對方，那麼你基本上不能在該頁面的任何地方使用換行符。

來源

2011-10-20 20:01:32

那麼這完全有道理。謝謝一堆。所以，如果你是我在這種情況下，並且你正在創建一個圖像庫，因爲我與代碼有問題，你會在哪裏放置換行符？你會把它們放在一起嗎？在你的PHP代碼中使用'\ n'是否是好習慣，還是僅僅是多餘的？ – stefmikhail

見後續。一般來說，在調試/構建網站時生成可讀的HTML是一個好主意。一旦它正常工作，您可以通過刪除縮進標籤/ spaces/linbreaks來使用縮小器來保存幾個字節。 –

優秀的跟進和評論。所以你可以在網站上線之前刪除'\ n'嗎？ – stefmikhail

將空格轉換爲（空）HTML文本節點，這佔用了一些空間（您可以通過步行DOM來測試）。除了首先從HTML中刪除空格以外，沒有解決方案可以讓這些消失消失。

當然這不僅僅是\n會導致這種行爲;空格或製表符也完全一樣。

來源

2011-10-20 20:01:17 Jon

你應該只輸出一個換行符，你實際上需要在輸出中換行。在HTML中，換行符是空格，就像空格字符一樣。

來源

2011-10-20 20:03:11

在該特定情況下，換行符用於美化html源文件，通過視圖源保持其可讀性。實際上這很常見。（然而多餘）

正如其他答案所說，它通常沒有意義。雖然這可以通過CSS和屬性（我們可以假設這裏並不是這種情況）來覆蓋：

white-space: pre-line;

來源

2011-10-20 20:06:36 mario

對不起，你是說使用css'white-space'，我可以消除有問題的空白嗎？ – stefmikhail

這不太可能。但看看一個CSS檢查器的計算屬性。也許你找到了一個相關的屬性。但是，單個空格或換行符可能會增加足夠的移動量。 – mario

我會的。非常感謝。最後，也許我會對'\ n'有點瘋狂。如果我將其中的一部分退出，我認爲我的代碼不會受到太多的影響。 – stefmikhail

PHP代碼換行符'\ n`導致元素之間的差距

回答

相關問題