2013-06-01 29 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