Remove the spacing between <p>

Question

I want to remove spaces between paragraphs, so all my text does not have any space between each other, but I do not know which proprety I should use.

I know line-height , but tried to combine with different values ​​and could not find the correct one.

Code example:

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

Answer 1

This space is not between paragraphs. that space is given to the symbols themselves. The type has an empty space around it (partly for placing ascenders and descenders).

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

But even then, pay attention that you will never get it for sure, since each font and font will have different indicators, and you will not always know which font will be displayed on the end user’s screen. Using a web font will make things more predictable for you.

Answer 2

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

• margin : 0 : this will remove the space between two paragraphs.
• padding : 0 : this will remove the space between the border and the text of each paragraph.
• line-height : 20px : This will reduce the distance between different lines in each paragraph. A value of 0 for this property will cause all rows on the same row to overlap everything.

Answer 3

The problem can be solved with the help of line height, check 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> 

Answer 4

I think you are looking for linear height: 1em. em is relative to the font size, so 2em means twice the font size.

Answer 5

Try:

margin-bottom: 0;

By default, the bottom border of the field is 1em

Answer 6

You can adjust the line height to get the minimum distance you are looking for.

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

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

Answer 7

The spacing is related to the font type. If you want the distance to be less, you have to either change the font or make an absolute position in a relative div or section.