如何最小化每行上的pargraph之间的空间

时间:2015-10-29 21:27:28

标签: html css text-alignment

我有大约5个段落,他们正在描述“姓名”“会员自”和“货币”等内容。

我在CSS中做些什么来缩短它们的高度。

http://i.imgur.com/EwZPeik.png 这是一个镜头。化身下的绿色位是我希望在垂直对齐方面彼此更接近的字体。

有什么想法吗?

HTML后跟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>

2 个答案:

答案 0 :(得分:1)

查看代码会有所帮助,但您可以重置<p>代码的边距和填充,如此,

p {margin: 0; padding:0;}

然后将段落标记的行高更改为所需的像素高度。

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

答案 1 :(得分:1)

&#13;
&#13;
p {
Line height: 50%;
}
&#13;
&#13;
&#13; 这样做了。谢谢。一直工作4个月。只研究网了大约半年。稍微回过头来。

KUDOS!