[html] How to reduce the space between <p> tags?

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.

This question is related to html css

The answer is


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.


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


A more real-world example:

p { margin: 10px 0;}

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>

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 }

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

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.


Try

margin: 0;
padding: 0;

If this doesn't work, try

line-height: normal;

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