空白符對HTML結構的影響與解決方案

何為空白符？

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

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

空白符對HTML結構的影響

HTML5中<textarea>標簽placeholder無法正確顯示

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

標簽換行了：

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

標簽之間有空格：

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

結果：一片空白

 

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

 正確的操作：

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

結果：占位了！！！

inline-block的默認空白間距

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

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>

*{
  margin: 0;
  padding: 0;
}
ul {
  list-style: none outside none;
  padding: 10px;
  background: green;
  text-align: center;
}
ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  background: orange;
  padding: 5px;
}

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

<ul>
  <li>item1</li
  ><li>item2</li
  ><li>item3</li
  ><li>item4</li
  ><li>item5</li>
</ul>

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

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

 

除了相鄰之間的Inline-block的空白間距外，像下面這種情況，也會產生空白符

 <div class="container">
     <img class="img" src="images/mod.jpg" alt="">
</div>

.container {
　　background: #fc0d0d;
}

.img {

　　display: inline-block;　　
    width: 100%;
}

• 結果：容器沒有顯式設置高度與寬度，但是總會比它的子元素img高出幾個像素（圖中小熊頭像下面的紅色部分）
• 解決：把img的display設為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。

長文本段落換行：

這個是在Chrome上的
在Firefox則沒有 問題，我嘗試用white-spacing屬性合並空白符，但是還有有一個空格，如果存在換行的話。

以下截圖來自WebStorm編輯器和Chrome瀏覽器。

我看了別人的網站，它這里也存在換行了，但是瀏覽器沒有解析它的空格，也沒有看到它的代碼里有對p作特殊的處理。

所以只能像前面一樣改變HTML結構，去除它的空格。但是把所有文本放在一行，得鋪在美國去。。。

解決方案：WebStorm可以設置自動換行——File-setting-Editor-General-Soft wrap（勾選Use soft wrap in editor），雖然視覺上是換行，瀏覽器解析的時候是按同一行文本解析的，所以不會在瀏覽器上產生空格。

 

總結

• 一般把元素設為inline-block是為了與其他元素在同一行排列，又或是為了能夠應用text-align這樣的屬性，如果沒這些必要，又想要對元素顯式設置寬高，就

直接設置display: block。

• 那什么時候適合用inline-block呢？
  • float元素脫離了文檔流，會對其周圍的元素造成影響，而inline-block不會有這些問題。
  • 想要通過設置父容器text-align：center讓元素居中，這顯然用浮動無法做到
  • 使元素垂直居中，inline-block元素是沿着默認的基線對齊，可以通過vertical屬性設置這個默認基線。

參考資料

• MDN：white-space
• 小火柴的藍色理想：深入理解CSS中的空白符和換行