如何减少 标签之间的空间？答案

【问题标题】：How to reduce the space between tags?如何减少 标签之间的空间？
【发布时间】：2023-03-14 15:27:02
【问题描述】：

我有一个要转换为 PDF 的页面。此页面包含许多段落，它们并不都适合单个页面。如果我可以减少 标签之间的间距，这将有助于更适合。这可能吗？谢谢。

【问题讨论】：

如何将它们转换为 PDF？
@deceze：两个例子：Ubuntu 可以开箱即用地将任何内容“打印”为 PDF。 Windows 可以在安装了 Acrobat 的情况下“打印”为 PDF（花费几百）。
@Delan OS X 也可以，很好。由于这是一个编程站点，尽管我假设 OP 以编程方式进行。那么CSS可能与解决方案没有任何关系。
@deceze，我们正在使用一个名为 Corda Highwire 的（废话）系统。您将 URL 传递给您的页面，它会生成它的 PDF 表示。糟糕的是，它的渲染引擎似乎是基于 IE6 标准的，所以你必须彻底破解标准 HTML 才能让它与你的内容相似。我研究了另一种名为 PrinceXML 的解决方案，它看起来不错，但我们被锁定在 Corda 中，所以这就是我坚持的方法。
那我会尽量避开 Corda。谢谢你的提醒。 :o)

标签： html css

【解决方案1】：

使用css：

p { margin:0 }

试试这个很棒的插件http://www.getfirebug.com :)

编辑：Firebug 现在作为一个项目关闭，它被迁移到https://www.mozilla.org/en-US/firefox/developer

【讨论】：

感谢 y_nk，我尽可能使用 firebug，但在使用 PDF 时帮助不大！！
但是 Dave，如果您将 URL 传递给您的页面，您可以使用该 URL 检查页面的呈现方式。 :)
True sr pt，但 PDF 的呈现方式与我们在浏览器中看到的不完全相同。我有时会使用 IE 开发工具栏来深入了解 HTML 的结构，但我们使用的这个 PDF 生成器是一只非常野蛮的野兽。

【解决方案2】：

<style type="text/css">
 p {margin-bottom: -1em;  margin-top: 0em;} 
</style>

这完全适合我。段落就在彼此的下方。当我对两个边距都使用 0em 时，两行之间仍然留有一些空间。我在浏览器中使用了开发人员工具，尝试使用 -1em 并且成功了。

【讨论】：

【解决方案3】：

如上所示，问题是在渲染时间中标签之前的边距。减少上边距不是一个优雅但有效的解决方案。

p { margin-top: -20px; }

【讨论】：

【解决方案4】：

我发现这可以提供更多书本风格的段落：

p.firstpar {
  margin-top: 0;
  text-indent: 2em;
  padding: 0 5px 0 5px;
}
p.nextpar {
  margin-top: -1em;
  text-indent: 2em;
  padding: 0 5px 0 5px;
}

使用em ("M") 单位，而不是px 单位，它使样式独立于字体大小。内边距按以下顺序排列：上、右、下、左。

【讨论】：

【解决方案5】：

CSS margin 属性可用于影响所有段落：

p {
  margin: XXXem;
}

用你想要的值替换XXX；完全没有空间：

p {
  margin: 0em;
}

【讨论】：

【解决方案6】：

试试

margin: 0;
padding: 0;

如果这不起作用，请尝试

line-height: normal;

【讨论】：

【解决方案7】：

我建议将 padding 和 margin 设置为 0。

如果这不能解决您的问题，即使不推荐，您也可以尝试使用 line-height。

【讨论】：

只有margin。 p 标签不使用 padding 作为默认间距，line-height 是行间距（如果减少会导致行重叠。
如果无法访问实际来源，我无法保证 line-height 不会有帮助，即使如前所述，不推荐这样做。填充不会改变两个段落之间的空间，但是，如果设置为大于 0 的值，它将在视觉上以两个段落之间更大的空间结束。感谢您的注意！ :)

【解决方案8】：

以上答案均不适合我，但这确实适用——在需要的地方使用 替换（或将其放入<style>P {line-height: 8px;}</style> 之类的样式标签中以影响所有 标签）。我知道 Mauro 是这么说的，但如果有人来这里寻求帮助，我希望他们会想看看一个例子。

【讨论】：

什么...在没有评论的情况下标记了这个？我不会为了我的健康而帮助别人，你知道的..

【解决方案9】：

一个更真实的例子：

p { margin: 10px 0;}

【讨论】：

这也很有效，实际上它比公认的答案更好。

【解决方案10】：

减少段落之间的空间。如果您使用的是博客，您将转到模板，“自定义”，然后找到“添加 css”并粘贴： p {margin:.7em 0 .7em 0} /*减少间距

从整行到大约。 1/2 线 */ 如果您只是标记您的网页，那仍然是您会使用的，只需将其放入您的 css 文件中即可。

我是 70 年代末/80 年代初的 sgml 模板设计师，所有这些标记都只是 sgml 中的一个 dtd（即使他们现在试图说 html5/css3 不是，是的，它仍然是。） :)

您也可以在 w3schools 找到所有这些基本信息。真的，如果您正在学习如何使用标记甚至 javascript 等进行布局，您应该从 w3schools 开始。有人说这“并不总是”正确，但是伙计们，我从 1960 年（12 岁）就开始从事 IT 行业，而 w3schools 最适合初学者。那里有什么不对吗？啊，我不知道，我没有发现任何错误，虽然有时如果你是初学者，你可能需要阅读两个观点才能真正掌握一个东西的意义。但是请记住，当您编写网页代码时，您并不是在编程，您只是在进行布局工作。（你们想喊就喊吧，这就是事实。）

【讨论】：

【解决方案11】：

将 margin-bottom 和 margin-top 都设置为 0em 将删除段落之间的空格：

<style type="text/css">
p {margin-bottom: 0em; margin-top: 0em;}
</style>

【讨论】：

【解决方案12】：

如果您将 HTML 文档转换为 PDF 页面，但页面溢出到两个页面，请尝试减小字体大小。当然，您也可以减少段落之间的间距（使用 CSS margin-top/margin-bottom 样式），甚至可以使用边距来减少左右间距。但在我看来，保持比例，只是让文字更小一点：

p { font-size: 90%; }

或

body { font-size: 9.5pt }

【讨论】：

【解决方案13】：

将  替换为&nbsp;
根据需要添加尽可能多的&nbsp;。

我通过这个解决了同样的问题。只是分享一下。

【讨论】：

意思是，把替换成 &$nbsp.. 从标签中去掉 $
不过，这有点小题大做，不是吗？用乱扔 html非常不受欢迎。
它符合您的目的，如果您不太热衷于 html 并且有很多其他事情要担心..