How to remove paragraph spacing with CSS?

Question

I am working on a project that needs an aligned letter grid. It must be peppered with tags so i can mess with individual words using css classes.

This is what i've tried so 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 at how the letters line up until a div is closed then a weird unsolicited blank space appears, ruining the alignment. How can i prevent/remove that?

I am already using a monospaced font so that's not the problem.

EDIT:

I've managed to circumvent the problem by wrapping the rows in a .clockRow element and adding this css rule:

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

It's not an optimal solution so i am still open to better answers. (Took a page out of CSSTricks' book: https://css-tricks.com/fighting-the-space-between-inline-block-elements/)

change your letter-spacing value in css from letter-spacing:5px to 1px or 0px — Udhay Titus, Jul 11 '16 at 10:49
@SagarKodte Ideally, the T in TEN would line up exactly below the S in ITS while the Z and E would still line up and so on. — Machinarius, Jul 11 '16 at 11:45
@UdhayTitus letter-spacing is only shortening the gap between all letters, not deleting the gap between words — Machinarius, Jul 11 '16 at 11:50

score 1 · Answer 1 · answered Jul 11 '16 at 10:55

1

use below code and adjust your spacing..

 letter-spacing: 0 px;

answered Jul 11 '16 at 10:55

Jayanti Lal

1,175
6
18

score 0 · Answer 2 · answered Jul 11 '16 at 10:50

0

Change your letter spacing in css as below

.clockLetter {
     letter-spacing: 0.01em;
}

answered Jul 11 '16 at 10:50

Sree KS

1,311
1
13
26

How to remove paragraph spacing with CSS?

2 Answers2