如何減少兩行文字之間的空間

-1

我得到了一個有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>

來源

2017-08-08 Lego

嘗試是負面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>

來源

2017-08-08 10:02:23

改變。資本類的行高到一個較小的值會做到這一點。

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

這將使它看起來更集中。

來源

2017-08-08 10:05:35

我更喜歡這種方法，而不是使用負邊距（這可能會導致其他副作用，例如元素空間沒有被覆蓋，因爲所述元素由負邊緣「向上」）。使用負邊距意味着其他地方可能會出現一些CSS錯誤。 – KarelG

如何減少兩行文字之間的空間

回答

相關問題