如何用CSS去除段落間距？

我正在研究一個需要對齊的字母網格的項目。它必須與標籤混雜在一起，所以我可以用css類來混淆每個單詞。如何用CSS去除段落間距？

這是我試過到目前爲止：

@import 'https://fonts.googleapis.com/css?family=Fira+Mono'; 
 

 
.clockContainer { 
 
    margin: auto; 
 
    color: black; 
 
    letter-spacing: 5px; 
 
} 
 

 
.clockLetter { 
 
    font-family: 'Fira Mono', monospace; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.clockLetter::after { 
 
    display: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.clockLetter::before { 
 
    display: none; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="clockContainer"> 
 
    <!-- First row --> 
 
    <div class="clockLetter" id="clockIts">ITS</div> 
 
    <div class="clockLetter" id="clockIgnore">Z</div> 
 
    <div class="clockLetter" id="clockA">A</div> 
 
    <div class="clockLetter" id="clockIgnore">T</div> 
 
    <div class="clockLetter" id="clockHalf">HALF</div> 
 
    <div class="clockLetter" id="clockIgnore">B</div> 
 
    <br/> 
 
    <!-- Second row --> 
 
    <div class="clockLetter" id="clockIgnore">IP</div> 
 
    <div class="clockLetter" id="clockTen">TEN</div> 
 
    <div class="clockLetter" id="clockQuarter">QUARTER</div> 
 
    <br/> 
 
</div>

看字母怎麼排隊，直到一個div被關閉，然後出現一個怪異的不請自來的空白，敗壞了對齊。我如何防止/刪除？

我已經在使用等寬字體，所以這不是問題。

編輯：

我已經設法通過在.clockRow元素包裹的行並將其加入CSS規則來規避這個問題：

.clockRow>.clockLetter:not(:nth-child(1)) { 
    margin-left: -9px; 
}

這不是一個最佳的解決方案，所以我仍然開放以更好的答案。（拿了首頁輸出CSSTricks'書：https://css-tricks.com/fighting-the-space-between-inline-block-elements/）

來源

2016-07-11 Machinarius

你是什麼想要嗎？ –

將css中的字母間距值從字母間距：5px更改爲1px或0px –

@SagarKodte理想情況下，TEN中的T將恰好低於ITS中的S，而Z和E仍然排隊等等。 – Machinarius

改變你在CSS的字母間距如下

.clockLetter { 
    letter-spacing: 0.01em; 
}

來源

2016-07-11 10:50:43 Sree

使用下面的代碼，並調整間距..

letter-spacing: 0 px;

來源

2016-07-11 10:55:48

如何用CSS去除段落間距？

回答

相關問題