如何减少两行文字之间的空间

Question

我得到了一个有2行文字的圆圈。 第一个说：P 第二个说：出版物。

它们之间的空间现在太大了。有没有办法让空间变小？

.circle1 { 
 
    font-family: Arial; 
 
    text-align: center; 
 
    background: #73B7DB; 
 
    border-radius: 100px; 
 
    width: 110px; 
 
    height: 105px; 
 
    padding-top:5px; 
 
    color: #fff; 
 
    margin: 0 auto; 
 
} 
 
.Capital { 
 
    margin: 0px 0 0px 0; 
 
    line-height:70px; 
 
    font-size: 60px; 
 
    font-weight:ligter; 
 
} 
 
.text { 
 
    text-align: center; 
 
    margin-top: 0px !important; 
 
    font-weight: 100; 
 
    font-size: 15px; 
 
}

<div class="circle1"> 
 
    <h2 class="Capital">P</h2> 
 
    <span class="text">Publications</span> 
 
</div>

Answer 1

尝试是负面margin。如margin: 0px 0 -10px 0对于.Capital。

.circle1 { 
 
    font-family: Arial; 
 
    text-align: center; 
 
    background: #73B7DB; 
 
    border-radius: 100px; 
 
    width: 110px; 
 
    height: 105px; 
 
    padding-top: 5px; 
 
    color: #fff; 
 
    margin: 0 auto; 
 
} 
 

 
.Capital { 
 
    margin: 0px 0 -10px 0; 
 
    line-height: 70px; 
 
    font-size: 60px; 
 
    font-weight: ligter; 
 
} 
 

 
.text { 
 
    text-align: center; 
 
    margin-top: 0px !important; 
 
    font-weight: 100; 
 
    font-size: 15px; 
 
}

<div class="circle1"> 
 
    <h2 class="Capital">P</h2> 
 
    <span class="text">Publications</span> 
 

 
</div>

Answer 2

改变。资本类的行高到一个较小的值会做到这一点。

.Capital { 
    margin: 10px 0 0px 0; 
    line-height: 50px; 
    font-size: 60px; 
    font-weight: ligter; 
} 

这将使它看起来更集中。