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

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -