CODEWITHSUNDEEP
htmlcss
Pacha
Pacha

Reputation: 1526

Remove spacing between <p>

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

Upvotes: 21

Views: 229975

Answers (12)

Malonso
Malonso

Reputation: 1

I think you are looking for this.

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

Upvotes: 0

user14097641
user14097641

Reputation:

You can do like this

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

Upvotes: -1

Joe Carter
Joe Carter

Reputation: 69

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.

Upvotes: -1

poop
poop

Reputation: 9

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

this is a paragraph i want this piece to be separate

Upvotes: -1

Kaaveh Mohamedi
Kaaveh Mohamedi

Reputation: 1805

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>

Upvotes: 22

Sasidhar Vanga
Sasidhar Vanga

Reputation: 3404

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.

Upvotes: 9

chucknelson
chucknelson

Reputation: 2336

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

Upvotes: 0

Hamza Dhamiya
Hamza Dhamiya

Reputation: 1287

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>

Upvotes: 2

mrilikecoding
mrilikecoding

Reputation: 75

Try:

margin-bottom: 0;

By default the margin bottom is 1em

Upvotes: 4

Sachman Bhatti
Sachman Bhatti

Reputation: 331

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.

Upvotes: 0

THE AMAZING
THE AMAZING

Reputation: 1603

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.

Upvotes: -3

DA.
DA.

Reputation: 40697

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.

Upvotes: 9

Related Questions