html - 使用 CSS 将两个标题彼此靠近对齐

Question

我有两条线，它们之间有空格。就像下面那个......

 <h2> Something Something <h2>



 <h4> Something here too </h4>

我希望它看起来像这样：

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

该空间显示在浏览器中。我使用标签只是为了说明清楚。

如何减少橙色矩形内的空间？

Answer 1

首先，确保您的标题元素上的paddingand为 0。margin

之后，您可以调整它们的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 的例子。Firebug 有一个名为 Layout的功能，它可以显示空间的来源：

Answer 5

像其他人所说的那样，重置页眉标签的边距和填充是一个很好的开始。我能给正在学习 CSS 的人的最好建议是获得 chrome。

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