Reputation: 1526
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"):
Upvotes: 21
Views: 229975
Reputation: 1
I think you are looking for this.
<p style="margin:0">test</p>
<p style="margin:0">test</p>
Upvotes: 0
Reputation:
You can do like this
<p style=" margin-bottom: -10px;"> <!--Choose wanted number-->
test
</p>
<p>
test
</p>
Upvotes: -1
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
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
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
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
margin : 0
: This will remove space between two paragraphs.padding : 0
: This will remove space between the border and text of each paragraphline-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
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
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
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
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
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