21

I want to remove the spaces between paragraphs so all my text doesn't have any kind of space between each other, but I don't know which proprety I should use.

I am aware of line-height, but tried messing around with different values and couldn't find the correct one.

Example code:

<style> p { margin:0; padding:0; font-size:60px; } div { margin:0; padding:0; background-color:red; } </style> <div> <p>test</p> <p>test</p> </div>

Image of code (I want to remove the space between "test" and "test"):

example

Improve this question
7
  • have you tried putting a negative margin on every <p> after the first? Commented Aug 22, 2013 at 23:56
  • have you tried with line-height? Commented Aug 22, 2013 at 23:56
  • @Brandon I don't know what is the exact space between the 2 tests, I considered it though. Commented Aug 22, 2013 at 23:57
  • @dqf13g32g Read what I asked, I already mentioned it. Commented Aug 22, 2013 at 23:57
  • line-height:1; maybe? Commented Aug 22, 2013 at 23:59

12 Answers 12

Reset to default
22

For first <p> set: margin-bottom:0; and for second <p> set: margin : 0; padding-top:0; simultaneously. It shoud be like:

<p style="margin-bottom:0;"> test </p> <p style="margin : 0; padding-top:0;"> test </p>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

9

That space isn't between the paragraphs. that's the space given to the characters themselves. Type has white space around it (partially to accommodate ascenders and descenders).

If you want to remove the space between the lines of text themselves, then you need to put the text into the same paragraph, and adjust the line height.

But even then, note that you'll never get this exact, as every typeface and font is going to have different metrics, and you won't always know what exact font will be shown on the end-user's screen. Using a web font will make things a bit more predictable for you.

Improve this answer

Comments

9

Check this out : http://jsfiddle.net/a45Mm/

HTML

<p>The quick brown fox jumps over the lazy dog.</p> <p id='p2'>The quick brown fox jumps over the lazy dog.</p>

CSS

p { font-size : 30px; background-color : #cfc; padding : 0; margin : 0; line-height : 20px; } #p2 { background-color : #fcc; }

You need to use all the following three properties

  1. margin : 0 : This will remove space between two paragraphs.
  2. padding : 0 : This will remove space between the border and text of each paragraph
  3. line-height : 20px : This will decrease spacing between different lines in each paragraph. A 0 value for this property will bring all lines in a single line overlapping everything.
Improve this answer

Comments

4

Try:

margin-bottom: 0;

By default the margin bottom is 1em

Improve this answer

Comments

2

The problem can be solved by line-height,check this fiddle.

<style> p { margin:0; padding:0; font-size:60px; line-height:30px; } div { margin:0; padding:0; background-color:red; } </style> <div> <p>test</p> <p>test</p> </div>
Improve this answer

2 Comments

This isn't the most adequate solution
@Pacha: What should happen when you have ascenders/descenders in the text? jsfiddle.net/thirtydot/neBZ6/1
0

I think what you are looking for is line-height:1em. em is relative to the font-size, so 2em means two times the size of the font.

Improve this answer

Comments

0

You can tweak the line height to get the sort of minimal spacing you're looking for.

Fiddle: http://jsfiddle.net/chucknelson/UtwXk/

p { margin: 0; padding:0; font-size:60px; line-height: .75em; }
Improve this answer

Comments

0

I've found that adding this CSS code to the first line:

.p1{ margin-bottom:0px; }

and, this to the next line:

.p2{ margin : 0; padding-top:0; }

To be the most efficient solution.

Improve this answer

Comments

0

I think you are looking for this.

<p style="margin:0">test</p> <p style="margin:0">test</p>

Improve this answer

Comments

-1

<'BR'> helps in some cases, so you might want to try that.

this is a paragraph i want this piece to be separate

Improve this answer

1 Comment

For simple html map popups this is actually the correct better option!
-1

You can do like this

<p style=" margin-bottom: -10px;"> <!--Choose wanted number--> test </p> <p> test </p>
Improve this answer

Comments

-3

The spacing is due to the font type. If you want the spacing to be smaller you will either have to change the font or do a position absolute on a relative div or section.

Improve this answer

2 Comments

That's already in the CSS provided in the question. Next time you should read the question.
Well then i read it wrong. ^ answer is the solution though google has a nice font selection. google.com/fonts

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.