何為空白符？ 空白符: 空格、製表符、換行符 注意：瀏覽器在解析HTML時會把所有空白符合併成一個空格 空白符號對HTML結構的影響 HTML5中標籤placeholder無法正確顯示</h3> <p> 不好的結構造成意外的結果：</p> <p>標籤換行了：</p> <div class="cnblogs_code"><pre><span style="color: #008080">1</span> <span style="color: #008000"><!--</span><span style="color: #008000">文本域结束标签 换行导致placeholder无法正确表示</span><span style="color: #008000">--></span><span style="color: #008080">2</span> <span style="color: #0000ff"><</span><span style="color: #800000">textarea </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="description"</span><span style="color: #ff0000"> name</span><span style="color: #0000ff">="description"</span><span style="color: #ff0000"> rows</span><span style="color: #0000ff">="5"</span><span style="color: #ff0000"> cols</span><span style="color: #0000ff">="30"</span><span style="color: #ff0000"> wrap</span><span style="color: #0000ff">="physical"</span><span style="color: #ff0000"> placeholder</span><span style="color: #0000ff">="这是一个多行输入框，输入您的个人描述"</span><span style="color: #0000ff">><br></</span><span style="color: #800000">textarea</span><span style="color: #0000ff">></span></pre></div> <p>標籤之間有空格：</p> <div class="cnblogs_code"><pre>1 <!--文本域标签之间有空格，导致placeholder无法正确表示-->2 <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框，输入您的个人描述"> #結果：一片空白 原因：因為表單區域中包含了空格符（空格、製表符、換行符），textarea內的空白符被認為是內容，阻止了佔位符文字的顯示。 正確的動作： 1 2 結果：佔位了！ ！ ！ inline-block的預設空白間距 預設情況下，inline-block元素之間大約有「4px」的間距（不同瀏覽器會有不同的大小）。 1 2 item13 item24 item35 item46 item57 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 2 item1item2item3item4item57 你可以點擊這裡狠狠嘗試demo 當然，空格符也是字符，去除它們也可以透過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. 可以透過CSS屬性white-space處理文字中的空格符 white-space：normal | pre | nowrap | pre-wrap | pre -line | inherit normal: 合并空白符，允许自动换行 nowrap: 合并空白符，不允许自动换行 pre-line: 合并空白符(不包括换行符)，允许自动换行 pre: 不合并空白符，不允许自动换行 pre-wrap: 不合并空白符，允许自动换行(在pre基础上，保留自动换行) 詳情請見：demo 補充充一點：CSS3新增了兩個換行屬性word-wrap和word-break。
