我有大约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>
答案 0 :(得分:1)
查看代码会有所帮助,但您可以重置<p>
代码的边距和填充,如此,
p {margin: 0; padding:0;}
然后将段落标记的行高更改为所需的像素高度。
p {margin: 0; padding:0; line-height: 15px;}
答案 1 :(得分:1)
p {
Line height: 50%;
}
&#13;
KUDOS!