How to reduce the space between <p> tags?

HtmlCss

Html Problem Overview


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.

Html Solutions


Solution 1 - Html

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

Solution 2 - Html

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

Solution 3 - Html

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

Solution 4 - Html

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.

Solution 5 - Html

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

Solution 6 - Html

A more real-world example:

p { margin: 10px 0;}

Solution 7 - Html

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.

Solution 8 - Html

Try

margin: 0;
padding: 0;

If this doesn't work, try

line-height: normal;

Solution 9 - Html

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

Solution 10 - Html

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.

Solution 11 - Html

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>

Solution 12 - Html

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

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

Solution 13 - Html

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 }

Solution 14 - Html

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

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDaveDevView Question on Stackoverflow
Solution 1 - Htmly_nkView Answer on Stackoverflow
Solution 2 - HtmlJonaView Answer on Stackoverflow
Solution 3 - HtmlDelan AzabaniView Answer on Stackoverflow
Solution 4 - Htmlstill-flyingView Answer on Stackoverflow
Solution 5 - HtmlcoretechieView Answer on Stackoverflow
Solution 6 - HtmlcprcrackView Answer on Stackoverflow
Solution 7 - HtmlMauroView Answer on Stackoverflow
Solution 8 - Htmlmini yangView Answer on Stackoverflow
Solution 9 - HtmlViolet WeedView Answer on Stackoverflow
Solution 10 - Htmlwww-0av-ComView Answer on Stackoverflow
Solution 11 - HtmlJMilesView Answer on Stackoverflow
Solution 12 - HtmlWilliam HumphriesView Answer on Stackoverflow
Solution 13 - HtmlKelly RichView Answer on Stackoverflow
Solution 14 - HtmlNET LoverView Answer on Stackoverflow