Html 如何减少 <p> 标签之间的空间?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2787310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:58:41  来源:igfitidea点击:

How to reduce the space between <p> tags?

htmlcss

提问by DaveDev

I have a page that I'm converting to PDF. This page contains a number of paragraphs and they don't all fit onto a single page. If I could reduce the spacing between the <p>tags, this would help fit more. Is this possible? Thanks.

我有一个要转换为 PDF 的页面。此页面包含许多段落,它们并不适合在一个页面上。如果我可以减少<p>标签之间的间距,这将有助于适应更多。这可能吗?谢谢。

回答by y_nk

use css :

使用 css :

p { margin:0 }

Try this wonderful plugin http://www.getfirebug.com:)

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

EDIT: Firebug is now closed as a project, it was migrated to https://www.mozilla.org/en-US/firefox/developer

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

回答by Jona

As shown above, the problemis the margin preceding the <p>tag in rendering time. Not an elegant solution but effective would be to decrease the top margin.

如上所示,问题<p>渲染时间标签前的边距。不是一个优雅的解决方案,但有效的方法是减少上边距。

p { margin-top: -20px; }

回答by Delan Azabani

The CSS marginproperty can be used to affect all paragraphs:

CSSmargin属性可用于影响所有段落:

p {
  margin: XXXem;
}

Replace XXXwith your desired value; for no space at all use:

替换XXX为您想要的值;完全没有空间使用:

p {
  margin: 0em;
}

回答by cprcrack

A more real-world example:

一个更真实的例子:

p { margin: 10px 0;}

回答by still-flying

I have found this to work to give more book style paragraphs:

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

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;
}

using the em("M") unit, rather than pxunit, it makes the style independent of the font-size. Padding goes in that order: top, right, bottom, left.

使用em("M") 单位,而不是px单位,它使样式独立于字体大小。填充按此顺序进行:顶部,右侧,底部,左侧。

回答by Mauro

I'll suggest to set padding and margin to 0.

我建议将填充和边距设置为 0。

If this does not solve your problem you can try playing with line-height even if not reccomended.

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

回答by Dish

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

This completely worked for me. Paragraphs were right below each other. When I used 0em for both the margins, there was still some space left in between the lines. I went for Developer tools in my browser, tried with -1em and it worked.

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

回答by www-0av-Com

None of the above answers worked for me but this does -- Use <P style='line-height: 8px;'>to replace <p>wherever needed (or put it in the style tag like <style>P {line-height: 8px;}</style>to affect all <p>tags). I realise Mauro says this, but if someone comes here for help, I expect they would want to see an example.

以上答案都不适用于我,但这确实适用 - 用于在需要的地方<P style='line-height: 8px;'>替换<p>(或将其放入样式标签中<style>P {line-height: 8px;}</style>以影响所有<p>标签)。我知道 Mauro 是这么说的,但如果有人来这里寻求帮助,我希望他们会希望看到一个例子。

回答by Violet Weed

Reduce space between paragraphs. If you are using blogger, you'd go to template, 'customize' then find 'add css' and paste this: p {margin:.7em 0 .7em 0} /*Reduces space between

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

from full line to approx. 1/2 line */ If you are just tagging your webpage, that's still what you would use, just put it into your css file(s).

从全线到大约。1/2 行 */ 如果你只是标记你的网页,那仍然是你会使用的,只需将它放入你的 css 文件中。

I was an sgml template designer in the late 70s/early 80s and all this tagging is just a dtd within sgml (even if they are now trying to say that html5/css3 is 'not', YES IT STILL IS.) :)

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

You can find all this basic info at w3schools too you know. Really if you are learning how to do layout using tagging or even javascript, etc. you should start with w3schools. Some people say it is 'not always' right, but folks, I've been in IT since 1960 (age 12) and w3schools is best for beginners. Are some things wrong there? Ah, I dunno, I haven't found any mistake, although sometimes if you are a beginner you might need to read two viewpoints to truly grasp the sense of something. But do remember that you are NOT programming when you code a webpage, you are simply doing layout work. (Yell all you want folks, that's the truth of it.)

您也可以在 w3schools 上找到所有这些基本信息。真的,如果您正在学习如何使用标记甚至 javascript 等进行布局,您应该从 w3schools 开始。有人说这“并不总是”正确,但是伙计们,我从 1960 年(12 岁)开始从事 IT 工作,w3schools 最适合初学者。有什么地方不对吗?啊,我不知道,我没有发现任何错误,尽管有时如果您是初学者,您可能需要阅读两个观点才能真正掌握事物的含义。但是请记住,您在编写网页时并不是在编程,您只是在进行布局工作。(大喊大叫所有你想要的人,这就是事实。)

回答by JMiles

Setting both margin-bottom and margin-top to 0em will remove a space between paragraphs:

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

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