2014-09-06 57 views
3

我有一個這樣的文件:如何調整CSS中每個<br>兩行之間的空間量?

This is some text.<br> 
This is some more text.<br> 
This is yet some more text. 

這使得這樣的:

This is some text. 
This is some more text. 
This is yet some more text. 

有什麼辦法來調節線之間的空間,但僅限於<br>的出現?輸出可能是這樣的:

This is some text. 

This is some more text. 

This is yet some more text. 
  • 這是不一樣的雙層空間,只要線纏繞在頁面上不會有多餘的空間出現。

如何調整<br>出現的行間距?

+4

你可以在'br'標籤上特別使用'line-height',就像[here](http://jsfiddle.net/d12j7nkw/)。需要檢查它是否適用於所有瀏覽器。 – Harry 2014-09-06 11:51:36

+1

可能重複[如何更改
的高度?](http://stackoverflow.com/questions/1409649/how-to-change-the-height-of-a-br) – Nateowami 2014-09-06 12:30:01

+0

我使用你的Google搜索結果確切的標題和作爲可能的重複顯示的問題作爲第一個結果出現。 – 2014-09-06 13:41:12

回答

0

是的,你可以......像在CSS使用line-height

.test{ 
    line-height:40px; 
} 

Demo

您可以使用padding-top

Demo2

2

是可能的圓盾使用CSS的標籤,但它不會很跨瀏覽器兼容,它不是一個好主意,因爲任何看着你的代碼的人都會認爲你沒有明白自己在做什麼,因爲肯定會更合適方法來實現你的目標。

br {} 

它自己的<br>沒有默認的高度。如果您的HTML頁面只有一個<br>,您就有一個空白頁面。在<br>標籤的風格會

<!-- HTML --> 
<br/> 

的頁面都會有這樣的造型

height: auto; 
line-height: normal; 
max-height: none; 
min-height: 0px; 

的一個<br>標籤代表從它的造型繼承父容器的高度。因此,如果它嵌套在一個段落內; <br>將基於該段落的行高和字體大小等於1行文本的高度。

<!-- HTML --> 
<p style="font-size:10px;line-height:1;"><br/></p> 

我現在有一個空的頁面,但因爲我指定的段落應該是10個像素,儘管該段基本上是空的,因爲我有一個突破是不是空的頁面是10個像素高。因此,休息等同於1行文本的高度。

當前的CSS1屬性和值不能描述'BR'元素的行爲 。在HTML中,'BR'元素指定單詞之間的換行符 。實際上,元素被換行符替換。 未來的CSS版本可能會處理添加和替換的內容,但 基於CSS1的格式化程序必須專門處理'BR'。 - Cascading Style Sheets, Level 1, Section 4.6: 'BR' elements


適當的解決辦法是將上,下塊分離成兩個容器(<p>),並設置在兩個塊之間的裕度。如果使用<p>標籤,你可以樣式的段落之間的空間不會增加不必要的空間,像這樣的頂級款..

// CSS 
p + p { margin-top:10px } // for every paragraph that's preceeded by a paragraph add a margin of 10pixels above. this gets every paragraph except the first one. 

或者僅僅是調整文字的行高,如果你不介意每隔一行之間的間距也增加

您可能還會發現僞選擇器:: first-line有用。


雖然我無法理解爲什麼;我確實相信這樣的事實,即有時總會有一個很好的理由來打破規則。如果你絕對肯定是在造型上死氣沉沉的,將其包裝在一個容器中並設置容器的行高。

<div style="line-height:50px;"><br></div> 
相關問題