如何将<hr />标记位置的行放在<h>标记的正下方？</h>

Question

好的，看看这两张照片：

1 -Ugly pic：<hr>行与<h>标记之间的空格太大。

2 -Nice pic：<hr>行与<h>标记之间的空格保持最小。

我们能在css中实现吗？

Answer 1

您可以在border-bottom代码上添加h1。

<h1>Samsung Galaxy S5</h1>

h1{font-weight:normal;border-bottom:1px solid #cccccc;}

我在这里做了一个示例，如果您仅使用heading tags和headings tag <hr>标记，则会显示差异。默认情况下，所有标题标记h1,h2,h3,h4,h5,h6都有一些padding和margin，每个浏览器都有所不同。

检查 DEMO 以查看使用margin and padding或不使用margin; padding

之间的区别

Answer 2

老实说Kheema已经建议使用border css属性比使用html hr元素更好。 hr元素现在更多地是关于语义而不是表示。

Answer 3

由于您没有发布任何代码，我认为这是一般性而非特定问题。

这可以通过CSS使用padding或margin属性来实现，具体取决于方案。

默认情况下，浏览器会添加一些样式。大多数浏览器都会为此空间使用margin（因为在这种情况下它最合适）。

以下是调整边距以类似维基百科屏幕截图的示例：

http://jsfiddle.net/D5gmV/

h1{
    margin:5px 0 0 0;
}

h3{
    margin:10px 0;
}
hr{
    margin:0;
}