使用CSS将两个标题彼此靠得更近

Question

我有两条线，它们之间有空间。像下面这样....

<h2> Something Something <h2> 



<h4> Something here too </h4> 

我希望它看起来是这样的：在浏览器中显示

<h2> Something Something <h2> 
<h4> Something here too </h4> 

空间。我使用这些标签只是为了说清楚。

如何降低橙色矩形内的空间？

Answer 1

首先，确保你的头元素padding和margin为0

之后，你可以调整自己的line-height值获得的空间量你喜欢。例如：http://jsbin.com/afivoq/4/edit

另一个选择给你！您可以在其跟随其他头部元素，像这样头元素施加负margin-top：

h2 + h4 { margin-top: -20px; } 

参见更新例如jsbin。

Answer 2

我所有填充和边距设置为0。

h4, h2 { padding:0; margin:0; } 

这是你的代码的过于简单化的最有可能的，但它会完成这项工作。

Answer 3

它添加在你的CSS：

h2{ 
    margin-bottom: 10px; //something smaller 
} 
h4 { 
    margin-top: 10px; //Whatever you like 
} 

Answer 4

你的第二个<h2>不是一个密切的标记</h2>所以你添加一个额外的H2元素。还请看看安装了Firebug的this example。萤火虫有一个特点called Layout这将告诉你在哪里的空间是来自：

Answer 5

重置您的margin和padding为其他人一样是说的标题标签是一个很好的开始。我可以给正在学习CSS的人的最佳建议是获得Chrome。

右键单击要更改的元素，然后点击“检查元素”。在右侧，您可以即时更改CSS。然后，您可以将结果复制并粘贴到您的应用程序中。 Chrome也有能力保存您的CSS代码。