使用CSS創建HTML元素的空間和物理分離
創建HTML元素的空間和物理分離對於初期的網頁設計師來說可能很難理解。 這是因為HTML有一個稱為“空白崩潰”的屬性。 無論您在HTML代碼中輸入1或100，Web瀏覽器都會自動將這些空間折疊到一個空格上。 這與Microsoft Word這樣的程序不同，它允許文檔創建者添加多個空格來分隔單詞和該文檔的其他元素。
這不是網站設計間距的工作原理。
那麼，如何在HTML 頁面中添加顯示在網頁上的空格呢？ 本文將探討一些不同的方法。
使用CSS的HTML空間
在HTML中添加空格的首選方式是使用層疊樣式表（CSS） 。 應該使用CSS來添加網頁的任何視覺方面，並且由於間距是頁面的視覺設計特性的一部分，所以CSS就是你希望完成的地方。
在CSS中，您可以使用邊距或填充屬性來添加元素周圍的空間。 此外，text-indent屬性在文本的前面添加空格，例如用於縮進段落。
以下是如何使用CSS在所有段落前添加空格的示例。 將以下CSS添加到外部或內部樣式表中：
p {
文本縮進：3em;
}
HTML中的空格：在文本中
如果您只是想在文本中添加額外的一兩個空格，則可以使用不間斷空格。
這個角色就像一個標準的空間角色一樣，只是它不會在瀏覽器內部崩潰。
以下是如何在一行文本中添加五個空格的示例：
這個文本里面有五個額外的空間
使用HTML：
此文字有＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp; 裡面有五個額外的空間
您也可以使用
標籤添加額外換行符。
該句末尾有5個換行
符
號。
為什麼在HTML中間隔是一個壞主意
儘管這兩個選項都起作用 - 非空格的空格元素確實會為您的文字添加空格，並且換行符會在上面顯示的段落下添加空格 - 這不是在網頁中創建空格的最佳方式。 將這些元素添加到HTML中會將可視信息添加到代碼中，而不是從視覺樣式（CSS）中分離頁面結構（HTML）。 最佳實踐表明，由於多種原因，這些應該是分開的，包括將來更新的容易性以及整體文件大小和頁面性能。
如果您使用外部樣式表來指定所有樣式和間距，那麼更改整個網站的樣式很容易，因為您只需更新該樣式表。
考慮上面這個句子的末尾有5個
標籤的例子。 如果您希望在每個段落的底部添加一定量的間距，則需要將該HTML代碼添加到整個網站的每個段落中。 這是一個相當多的額外的標記，它會膨脹你的網頁。
此外，如果您決定這種間距太大或太小，並且您希望稍微改變一點，則需要編輯整個網站中的每一段。 不，謝謝！
而不是將這些間距元素添加到您的代碼，使用CSS。
p {
padding-bottom：20px;
}
這一行CSS將在頁面段落下添加空格。 如果您以後想要更改此間距，請編輯這一行（而不是整個網站的代碼），然後您就可以開始了！
現在，如果您需要在網站的一部分中添加單個空間，則使用
標記或單個非空白空間不是世界末日，但您需要小心。
使用這些內聯HTML間距選項可能會很滑。 雖然有一兩個可能不會傷害您的網站，但如果您繼續沿著這條路走下去，您會在網頁中引入問題。 最後，您最好轉向CSS以獲取HTML間距以及所有其他網頁視覺需求。