大家有沒有想過，在寫一個網頁內容的時候，哪一個 HTML 標籤是最常用到的呢？ 段落標籤 <p>？還是標題 <H1~6>？還是萬用標籤 <span>？ 其實最常用到的， 而且是密集到，你根本會完全沒有察覺下了一個HTML的標籤的，就是換行符號：<BR />。

不管你是用什麼樣的網站系統都一樣，只要按下 Enter 鍵(或是 Shift+Enter)，就是一個 BR 換行符號，如果開啟任何一篇網頁的原始碼，一定也會發現，原始碼中出現最多的標籤，絕對也是 <br />。

現在問題來了。

在一些情況下，好比是文章書寫習慣，或是系統轉譯換行的邏輯與規則，所以經常在文章段落中，產生一些不在預期中的換行標籤。 像是一連好幾個 BR(就是一連兩個或兩個以上的BR)：<br /><br /><br />。 或是一個段落標籤 P 結束後，又緊接著出現一個換行 BR： </p><br />。 又或者是項目符號結束後，很自然的下了一個換行，但就會變成：</ul><br />。 還有就是內文的副標題後面也常常會跟隨一個 BR：<h2>內文小標</h2><br />。

一般來說，連續的換行標籤，在瀏覽器上是看不出差異，就跟打一個 BR 是一樣的，可是其他的情況，就會產生額外的行距、高度或空白區間，在樣式上就很難處理。

有什麼方法可以去掉這樣的額外高度嗎？就是如何讓 BR 變成一個沒有實際作用的標籤呢？

用 CSS 重新定義 BR 標籤的樣式

沒錯，我們又要仰賴 CSS 的語法了(CSS 真是一切解，真實不虛)。

首先我們要理解在HTML中，BR其實不是一個『真的』標籤，他只是一個換行標記，所以一般任何瀏覽器在解讀 BR 的時候，也是不會賦予他任何的樣式，簡單來說，就是沒有高度、寬度。 會產生額外的高度，多半都是前後有其他的標籤所造成的合併效應。

額外插播： 如果要強迫連續兩個 BR 產生額外的兩行行高，可以在 BR 跟 BR 中間，寫一個空白字元 &nbsp;： 例如 <br />&nbsp;<br />

那要怎麼去除這個高度呢？ 我們可以用 CSS 來這樣標記：

br{content:"";display:none}

就是這樣，沒有了。 用這個樣式語法重新來定義 BR，就可以讓 BR 徹底變成像空氣一樣的標籤。

等等，這樣一設，不就全部的網頁都沒有 BR 了嗎？連換行都沒有了耶！感覺好擠喔。

別緊張，前面只是先來驗證一下可不可以消滅 BR 的存在，接下來，我們就來試著只讓 P 或是 H2、ul、li 等標籤後面緊連著的 BR 消失就好了。 語法是這樣的：

p+br,
h2+br,
ul+br,
li+br{content:"";display:none}

這樣就不用擔心額外產生的高度了！

CSS 語法：+ 加號是幹嘛的？

有朋友可能會問了，上面的例子中，那個+號是什麼作用呢？ + 加號在CSS語法中，就是代表著『緊跟著的』標籤，我們以 p+br 這個來說明： P+br，就是指在 P 段落標籤後面緊跟著的那個 BR 標籤，除此之外的其他的 BR，我們就不管他了。 h2+br，就是在 H2 這個標籤後，緊跟著的那個BR，以此類推。

一起來試試吧 ^^