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

[CSS3]如何重新定義HTML 中換行標籤BR 的樣式或是直接把BR的行距高度移除. 如何用CSS定義BR 換行標記的樣式. 大家有沒有想過，在寫一個網頁內容的 ... 首頁[how]其實可以這樣做[App]應用應用[info]或許有興趣知道 iOSMacOSHTML5CSS3CloudAffinityPhoto,Photoshop amigo! cassandre chiron marmalade sweetdumpling Tahini ‹‹[CSS]網頁用的尺寸單位:PX跟EM怎麼區分呀？等等，還有一個REM...[CSS3]如何用CSS來改變Placeholder這個屬性的文字顏色››Home››[how]其實可以這樣做››CSS3教學 [CSS3]如何重新定義HTML中換行標籤BR的樣式或是直接把BR的行距高度移除 如何用CSS定義BR換行標記的樣式 大家有沒有想過，在寫一個網頁內容的時候，哪一個HTML標籤是最常用到的呢？ 段落標籤

？還是標題

？還是萬用標籤？ 其實最常用到的， 而且是密集到，你根本會完全沒有察覺下了一個HTML的標籤的，就是換行符號：。

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

現在問題來了。

在一些情況下，好比是文章書寫習慣，或是系統轉譯換行的邏輯與規則，所以經常在文章段落中，產生一些不在預期中的換行標籤。

像是一連好幾個BR(就是一連兩個或兩個以上的BR)：。

或是一個段落標籤P結束後，又緊接著出現一個換行BR：。

又或者是項目符號結束後，很自然的下了一個換行，但就會變成：。

還有就是內文的副標題後面也常常會跟隨一個BR：內文小標。

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

有什麼方法可以去掉這樣的額外高度嗎？就是如何讓BR變成一個沒有實際作用的標籤呢？ 用CSS重新定義BR標籤的樣式 沒錯，我們又要仰賴CSS的語法了(CSS真是一切解，真實不虛)。

首先我們要理解在HTML中，BR其實不是一個『真的』標籤，他只是一個換行標記，所以一般任何瀏覽器在解讀BR的時候，也是不會賦予他任何的樣式，簡單來說，就是沒有高度、寬度。

會產生額外的高度，多半都是前後有其他的標籤所造成的合併效應。

額外插播： 如果要強迫連續兩個BR產生額外的兩行行高，可以在BR跟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，以此類推。

一起來試試吧^^我們也有臉書專頁了，歡迎大家按讚加入喔：@5min.reading CSSBRHTML 延伸閱讀:更多相關的主題文章[CSS:counter(line)]如何用CSS來顯示區塊裡的序列行數[RWD]iPhoneX以及8,8+等各代機種的螢幕尺寸解析度與CSS語法對照表[HTML5]運用網頁上的電話超連結語法(tel:)，讓大家點一下就直接撥打電話[CSS3]如何用CSS來改變Placeholder這個屬性的文字顏色[HTML5]b,i,s跟strong,em,del這些看起來一樣，但意義不同的標籤們[GoogleMaps]如何隱藏Google地圖上所有的地標、路名、餐廳等文字標籤圖層，產生一張純粹的地圖[CSS]網頁用的尺寸單位:PX跟EM怎麼區分呀？等等，還有一個REM...[CSS3:Word-Break]用CSS來設置中英文的文字斷行樣式[CSS]如何讓別人無法列印你的網頁，簡單一行CSS搞定[RWD]用Javascript來偵測是否為行動裝置最簡單的方法 ‹‹[CSS]網頁用的尺寸單位:PX跟EM怎麼區分呀？等等，還有一個REM...[CSS3]如何用CSS來改變Placeholder這個屬性的文字顏色››