开发者

How to reduce the space between <p> tags?

开发者 https://www.devze.com 2022-12-29 05:52 出处:网络
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> t开发者_运维百科ags

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> t开发者_运维百科ags, this would help fit more. Is this possible? Thanks.


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


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


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


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.


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


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.


Try

margin: 0;
padding: 0;

If this doesn't work, try

line-height: normal;


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


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.


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>


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 }


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

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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号