円内の2行のテキスト間のスペースを減らす方法

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

negativ marginを試してみてください。 .Capitalの場合はmargin: 0px 0 -10px 0となります。

.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クラスの行の高さを変更するだけでそれを行います。

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

これにより、さらに中央に表示されるようになります。