How to remove paragraph spacing with CSS? -
this question has answer here:
i working on project needs aligned letter grid. must peppered tags can mess individual words using css classes.
this i've tried far:
@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>
look @ how letters line until div closed weird unsolicited blank space appears, ruining alignment. how can prevent/remove that?
i using monospaced font that's not problem.
edit:
i've managed circumvent problem wrapping rows in .clockrow element , adding css rule:
.clockrow>.clockletter:not(:nth-child(1)) { margin-left: -9px; }
it's not optimal solution still open better answers. (took page out of csstricks' book: https://css-tricks.com/fighting-the-space-between-inline-block-elements/)
use below code , adjust spacing..
letter-spacing: 0 px;
Comments
Post a Comment