在 <h1> 标签后删除换行符？答案

【问题标题】：Removing newline after <h1> tags?在 <h1> 标签后删除换行符？
【发布时间】：2012-03-10 19:00:59
【问题描述】：

我在删除 <h1> 标记后的换行符时遇到问题，因为每次打印时，它都会在其后直接添加一个换行符，所以像 <h1>Hello World!</h1> <h2>Hello Again World!</h2> 这样的打印输出如下：

Hello World!

Hello Again World!

我不确定我需要在 CSS 中更改哪些标签，但我希望这与填充或边距有关

如果可能的话，我还想保持垂直填充。

【问题讨论】：

标签： html css header styles stylesheet

【解决方案1】：

听起来您想将它们格式化为内联。默认情况下，h1 和h2 是跨越行的整个宽度的块级元素。您可以像这样将它们更改为与 css 内联：

h1, h2 {
    display: inline;
}

这里有一篇文章更详细地解释了block 和inline 之间的区别：http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

要保持垂直填充，请使用inline-block，如下所示：

h1, h2 {
    display: inline-block;
}

【讨论】：

如果我想向左或向右添加浮动，那么它将不起作用。那我该怎么办？

【解决方案2】：

<h1> 标签设置了{display: block}。它们是块级元素。要关闭此功能：

{display: inline}

【讨论】：

默认情况下 h 标签使用边距，内边距，所以我们必须删除这些
我还想尽可能保持垂直填充，我尝试过 display: inline;，但它不再具有垂直填充。
删除填充和边距不会删除新行。新行是因为它们是块级元素而引起的，这意味着它们占据了它们出现的所有水平空间（默认情况下）。因此，除非您进行浮动、更改显示或其他一些属性，否则您将始终在 h* 标记之后添加换行符。
@JackWilsdon Ben Lee 已经更新以展示如何轻松维护垂直填充，所以在您编辑后我不会再打扰我了。

【解决方案3】：

我刚刚通过在 html 样式部分中将 h1 边距值设置为减号解决了这个问题。它非常适合我的需求。

<style>
h1 { 
    display: block;
    font-size: 0.9em;
    margin-top: -1.91em;
    margin-bottom: -1.91em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
</style>
<h1 style="text-align:center"> Headline </h1>

【讨论】：

这适用于删除垂直填充而不是换行符。
我用谷歌搜索了错误的东西，而我注意到这个答案实际上是我正在寻找的。很好的解决方案，虽然不是问题的答案。不管怎么说，还是要谢谢你！ :)

【解决方案4】：

<style>
h1 {
    padding: 0px;
    margin: 0px;
}
</style>

【讨论】：