空白符: 空格、制表符、換行符

注意：瀏覽器在解析HTML時會把所有空白符合并成一個空格

不好的結構造成意外的結果：

標簽換行了：

1 !--文本域結束標簽 換行導致placeholder無法正確表示-- 2 textarea id= description name= description rows= 5 cols= 30 wrap= physical placeholder= 這是一個多行輸入框，輸入您的個人描述 
 /textarea 

標簽之間有空格：

1 !--文本域標簽之間有空格，導致placeholder無法正確表示-- 2 textarea id= description name= description rows= 5 cols= 30 wrap= physical placeholder= 這是一個多行輸入框，輸入您的個人描述 /textarea 

結果：一片空白

原因：因為表單區域中包含了空白符（空格、制表符、換行符），textarea內的空白符被認為是內容，阻止了占位符文本的顯示。

正確的操作：

1 !--文本域開始標簽與結束標簽緊挨著，placeholder正確表示-- 2 textarea id= description name= description rows= 5 cols= 30 wrap= physical placeholder= 這是一個多行輸入框，輸入您的個人描述 /textarea 

結果：占位了?。?！

默認情況下，inline-block元素之間大約有“4px”的間距（不同瀏覽器會有不同的大?。?。

1 ul 2 li item1 /li 3 li item2 /li 4 li item3 /li 5 li item4 /li 6 li item5 /li 7 /ul 

 1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 ul { 6 list-style: none outside none; 7 padding: 10px; 8 background: green; 9 text-align: center;10 }11 ul li {12 display: inline-block;13 *display: inline;14 zoom: 1;15 background: orange;16 padding: 5px;17 }

原因：標簽之間的空白符造成的。

解決：此時可以通過改變HTML的結構，讓上一個li的結束標簽與下一個li開始相連，去除空白符。

1 ul 2 li item1 /li3 li item2 /li4 li item3 /li5 li item4 /li6 li item5 /li 7 /ul 

你可以點擊這里狠狠嘗試demo

當然，空白符也是字符，去除它們也可以通過CSSyangshi_10628_1.html' target='_blank'>CSS樣式letter-spacing、word-spacing來設定。詳情見：如何解決inline-block元素的空白間距

如下面的換行符，和空格。

 div They can stay 72-hours  within the Shandong province after they have entered China via the Qingdao International Airport. /div 

結果：瀏覽器解析的時候只保留單詞之間的空白符被合并為一個空格。They can stay 72-hours within the Shandong province after they have entered China via the Qingdao International Airport.

white-space：normal | pre | nowrap | pre-wrap | pre-line | inherit

normal: 合并空白符，允許自動換行nowrap: 合并空白符，不允許自動換行pre-line: 合并空白符(不包括換行符)，允許自動換行pre: 不合并空白符，不允許自動換行pre-wrap: 不合并空白符，允許自動換行(在pre基礎上，保留自動換行)

詳情見：demo

補充一點：CSS3新增了兩個換行屬性word-wrap和word-break。

以上就是何為空白符？空白符對HTML結構影響的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。