How to minimize space between pargraphs on each line

Question

I have about 5 paragraphs and they are describing things like "Name" "Member Since" and "Currency".

What do I do in CSS to shorten the height of them.

https://i.stack.imgur.com/LNGAW.png This is a shot. The green bits under the avatar are the fonts I want to appear closer to each other in terms of vertical alignment.

Any ideas?

THE HTML followed by the CSS

.user-info-box {
 padding: 25px;
border: 25px;
margin: 25px;
border: 1px solid #2fac66;
}

p {
 color: #2fac66;  

}

#user-avatar {
padding: 5px;
border: 1px solid #2fac66;
}

.avatar-detail {
    color: #2fac66;
}

        <div class="user-info-box">
<img src="images/user-avatar.png" id="user-avatar">

<p class="avatar-detail">[Username]</p><p class="avatar-info">Captain Anderson</p>

<p class="avatar-detail">[Currency]</p>
<p class="avatar-info">1, 132</p></center>
        
        
<p class="avatar-detail">[Member Since]</p>
<p class="avatar-info">September 29th, 2014</p></center>
        
        
<p class="avatar-detail">[Profile]</p>
    <p class="avatar-info"> >> click here</p></center>

</div>

There is often a default margin on `
` tags. See [What is the default...](http://stackoverflow.com/questions/819161/what-is-the-default-padding-and-or-margin-for-a-p-element-reset-css). — showdev, Oct 29 '15 at 21:39
You can change line-height if you want the lines within the
tag tighter or change margin-bottom, if want the
s closer together. — Octopus, Oct 29 '15 at 21:48
Updated the post with an answer. Totally forgot about line height. Thanks :D — Richard Peter Targett, Oct 29 '15 at 21:53

score 1 · Accepted Answer · edited Nov 17 '15 at 09:57

1

It would help to see your code but you can reset the margin and padding for the <p> tags like so,

p {margin: 0; padding:0;}

and then change the line height on the paragraph tags to the desired pixel height.

p {margin: 0; padding:0; line-height: 15px;}

edited Nov 17 '15 at 09:57

Mr Lister

45,515
15
108
150

answered Oct 29 '15 at 21:48

Patrick Sharer

100
13

line-height would be better expressed in %, so it's relative to font-size. – Octopus Oct 29 '15 at 21:48

score 1 · Answer 2 · answered Oct 29 '15 at 21:53

1

p {
Line height: 50%;
}

That did it. Thanks. Been working day job for 4 months. Only studied web for about half a year. Takes a little getting back into.

KUDOS!

answered Oct 29 '15 at 21:53

Richard Peter Targett

127
6

How to minimize space between pargraphs on each line

2 Answers2