看看HTML中的空白是如何被瀏覽器處理的
如果你是一個開始的網頁設計師，你很早就必須了解的許多事情之一就是網站代碼中的空白處理由網頁瀏覽器處理的方式。
不幸的是，瀏覽器處理空白的方式一開始並不是非常直觀，特別是如果您使用HTML並將其與文字處理程序中的空白處理方式進行比較，您可能會更熟悉這些空白處理程序。
在文字處理軟件中，您可以在文檔中添加大量間距或製表符，並且間距將反映在文檔內容的顯示中。 HTML或網頁都不是這種情況。 因此，了解網絡瀏覽器如何處理空白空間是非常重要的。
打印間距
在文字處理軟件中，三個主要的空白字符是空格，製表符和回車符。 其中的每一種都以不同的方式進行操作，但在HTML中，瀏覽器呈現的都基本相同。 無論您在HTML標記中放置一個空格還是100個空格，還是將間距與製表符和回車符合在一起，當瀏覽器呈現頁面時，所有這些空間都會縮減為一個空格。 在網頁設計術語中，這被稱為空白崩潰。 您不能使用這些典型的間距鍵在網頁中添加空格，因為在瀏覽器中渲染時，瀏覽器會將多個空格向下折疊為只有一個空格，
為什麼有人使用標籤？
通常，當人們在文本文檔中使用製表符時，他們出於佈局的原因使用它們，或者使文本移動到某個地方或與另一個元素保持一定的距離。 在網頁設計中，您不能使用上述空格字符來實現這些視覺樣式或佈局需求。
在網頁設計中，在代碼中使用額外的空格字符純粹是為了便於閱讀代碼。 網頁設計人員和開發人員經常使用製表符來縮進代碼，以便他們可以看到哪些元素是其他元素的子元素 - 但這些縮進不會影響頁面本身的可視佈局。 對於那些需要視覺佈局更改的人，您需要轉向CSS（級聯樣式表）。
使用CSS創建HTML選項卡和間距
今天的網站是建立在結構和風格分離的基礎上的。 一個頁面的結構由HTML處理，而樣式由CSS指定。 這意味著要創建間距或實現特定的佈局，您應該轉向CSS，而不是試圖簡單地向HTML代碼添加空格字符。
如果您嘗試使用製表符來創建文本列，則可以使用使用CSS定位的
如果您正在繪製的數據是表格數據，則可以使用表格來根據需要調整數據。 表格經常在網頁設計中受到譴責，因為它們被濫用為純粹的佈局工具多年，但如果您的內容包含上述表格數據，表格仍然是完全有效的。
邊距，填充和文本縮進
使用CSS創建間距的最常用方法是使用以下CSS樣式之一：
- 餘量
- 填充
- 文本縮進
例如，您可以使用以下CSS縮進像選項卡這樣的段落的第一行（請注意，這裡假定您的段落的類屬性為“first”）：
p.first {
文字縮進：5em;
}
這一段現在縮進大約5個字符。
您還可以在CSS中使用邊距或填充屬性將間距添加到元素的頂部，底部，左側或右側（或這些邊的組合）。 最終，您可以通過轉向CSS來實現任何類型的間距。
移動文本多個空間沒有CSS
如果您只想將文本從前一個項目中移出多個空格，則可以使用非中斷空格。
要使用不間斷空格，只需添加＆nbsp; 盡可能多地在HTML標記中使用它。
例如，如果您想將單詞移動五個空格，則可以在單詞前添加以下內容。
＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;HTML尊重這些並不會將它們折疊到一個空間。 但是， 這被認為是一種非常糟糕的做法，因為它只是為了實現佈局需要而向文檔添加額外的HTML標記。 回顧一下結構和样式的分離，您應該避免添加非分隔空間來實現所需的佈局效果，而應該使用CSS邊距和填充。