[CSS3]如何重新定義 HTML 中換行標籤 BR 的樣式或是直接把BR的行距高度移除

如何用CSS定義 BR 換行標記的樣式
如何用CSS定義 BR 換行標記的樣式

大家有沒有想過,在寫一個網頁內容的時候,哪一個 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,以此類推。


一起來試試吧 ^^