是可能的圓盾使用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>
你可以在'br'標籤上特別使用'line-height',就像[here](http://jsfiddle.net/d12j7nkw/)。需要檢查它是否適用於所有瀏覽器。 – Harry 2014-09-06 11:51:36
可能重複[如何更改
的高度?](http://stackoverflow.com/questions/1409649/how-to-change-the-height-of-a-br) – Nateowami 2014-09-06 12:30:01
我使用你的Google搜索結果確切的標題和作爲可能的重複顯示的問題作爲第一個結果出現。 – 2014-09-06 13:41:12