2011-08-12 256 views
8

我知道BR用於創建換行符。我只是想知道它是否也在線條之間創造空間?請考慮以下例子:BR標籤有高度嗎?

<p> 
Hello <br/> Stackoverflow <br/><br/><br/> ! 
</p> 

輸出看起來像:

Hello 
Stackoverflow 


! 

通過把越來越多的BR我發現距離之間的線增加。是因爲<br>?但是當我試圖控制CSS中的高度<br>時,它並沒有跟隨,看起來它根本沒有高度,只是一個換行符。如果<br>不是行間空格的原因,那哪個是哪個以及如何在CSS中控制它?此外,我通常使用<br>來創建線條之間的大距離,我這樣做以取代\n\r或類似的數據時,從數據庫中,這樣好嗎?

+0

一種解決方案是這裏''
高度 - http://stackoverflow.com/a/20488415/2165415 == –

回答

2

我發現,我們看到,當我們把多個BR的空間不是由BR但P元素的行高實際造成的。

考慮下面的標記:

<p> 
Hello <br/> Stackoverflow <br/><br/><br/> ! 
</p> 

輸出

1. Hello 
2. Stackoverflow 
3. 
4.  
5. ! 

3號線和4,這裏只是空行。儘管是空的,他們仍然擁有線條高度。

2

br元素強行突破(結束)文本的當前行...

更多信息here。是的,增加更多會增加距離,但我認爲除了應用clear之外,你不能爲造型設計太多。

2

使用的< br/>的數量只能創建換行符。如果您希望在頁面上的特定部分之間創建較大的空間,我將使用CSS margin屬性來距離下一個頂部部分。例如:

<div id="topSection" class="margin-bottom: 100px;">Hello Stackflow</div> 
<div id="bottomSection">Content lower on the screen without unnecessary breaks.</div> 
6

<br />標記用於換行符。如果你想這樣看,你可以使用CSS line-height屬性來控制線條之間的距離。

1

是的,通過更多的BR標籤將創建新的換行符。不建議使用BR標籤來創建線條之間的較大距離,而是使用CSS marginpadding來引入空格。

+0

我也想到了用margin和padding的。請參閱我從數據庫中關於換行的編輯。 – dpp

+0

在這種情況下,請使用正則表達式將'BR'替換爲'P'。參見工作[demo here](http://jsfiddle.net/f6ju2/2/)。 –

1

作爲替代使用<br />讓你字裏行間喜歡的間距,您可以使用CSS line-height財產

+0

那麼你的意思是那些空格不是來自'BR',而是來自默認的'line-height'? – dpp

+0

'Stackoverflow'和'!'之間的空格是由於您添加了'
''標籤。當使用'line-height' CSS屬性時,你可以改變行間的間距(不管它們是否被強行破壞) – kaveman

5

對線之間的大的距離,最好使用<p>標籤的每一行,在其中可以控制身高。

http://jsfiddle.net/efortis/f6ju2/

+0

'p'是一個不錯的選擇,請參閱我關於換行符的編輯。當文本來自數據庫時,我將如何使用'p'? – dpp

+0

是的,你可以預先格式化你的數據 –