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

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

228115 次浏览

use css :

p { margin:0 }

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

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

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

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

The CSS margin property can be used to affect all paragraphs:

p {
margin: XXXem;
}

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

p {
margin: 0em;
}

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

p { margin-top: -20px; }

Replace <p> </p> with &nbsp;
Add as many &nbsp; as needed.

I solved the same problem by this. Just sharing it.

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

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).

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.) :)

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.)

A more real-world example:

p { margin: 10px 0;}

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 px unit, it makes the style independent of the font-size. Padding goes in that order: top, right, bottom, left.

If you're converting an HTML doc into a PDF page, but the page spills onto two pages, try reducing the font size. Of course you can also decrease the spacing between paragraphs (with the CSS margin-top/margin-bottom styles), or even the left and right gutters with margins. But to my eye, keep things in proportion and just make the text a little smaller:

p { font-size: 90%; }

or

body { font-size: 9.5pt }
<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.

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.

Try

margin: 0;
padding: 0;

If this doesn't work, try

line-height: normal;

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

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

I followed this post to add in line styling to the '<p'> I needed to remove the space from.

<p style="margin : 0; padding-top:0;">Remove space</p>