2013-06-01 48 views
1

我爲標題使用<h2>標記。在下面,我有一個<hr />標籤。標題和<hr />之間的空間太大。顯示內嵌或負邊距

我會在<h2>標記上使用display: inline;,在<hr />上使用否定margin-top,還是使用其他的東西?

enter image description here

+0

您是否試圖使用'


'作爲下劃線?橫向規則是爲了分離內容。你應該使用的是h2上的邊界底部。 – cimmanon

+0

是的。 '


'是2行,一個白色和一個灰色的。我將如何使用'border-bottom'來做到這一點? –

回答

3

不要使用標題和它的介紹內容之間hr元素。 (*)

更好地利用CSS:

h2 { 
    border-bottom: 2px groove white; 
} 

比使用的結構元件,用於造型的目的。

(*)它的語義更像end of one section, start of another(根據Hixie通過HTML5doctor)。我過去一年的項目使用了很多,但是坦率地說,你也可以沒有......;)它跨瀏覽器的風格也很難,根本沒有任何幫助!

編輯:OP關心小時的默認渲染,發現比我最初的造型1px solid #CCC2px groove white(見下面的評論),它的編輯得到了拒絕一個更好的方式,但它的罰款給我,讓我編輯我的答案呢。

+0

請注意,如果你希望它看起來像一個水平線,你可能想使用'border-bottom:2px inset#CCC'。就個人而言,我認爲1px固體邊框看起來更好。 – cimmanon

+0

'


'是2行,一個白色和一個灰色的。我將如何使用'border-bottom'來做到這一點? –

+0

@cimmanon感謝inset關鍵字!不記得做這種雙色邊框的最佳方式是什麼,因爲我很少需要設計它。或者當它發生在水平列表項之間... – FelipeAls