It is necessary to make sure that there are no spaces between the spans, but only: (as in the clock).

HTML:

<div id="countdown"> <span class="days time-font">00</span> <span class="hours time-font">00</span>: <span class="minutes time-font">00</span>: <span class="seconds time-font">00</span> </div>

2 answers 2

So you put them yourself. Your transitions to a new line between span -ami are translated into a space character.

 <div id="countdown"> <span class="days time-font">00</span> <span class="hours time-font">00</span>:<!-- --><span class="minutes time-font">00</span>:<!-- --><span class="seconds time-font">00</span> </div>

    The fact is that the inline-block rendered by the browser as a letter. The distance that you see between the inline-block and the adjacent "letters" is the usual letter spacing or, if you take the term from typography, tracking .

    Tracking is not a fixed value and varies in different font families, and also depends on the font size. Because of this, we cannot use fixed values ​​in the properties of word-spacing , margin , etc. to solve this problem.

    There are several ways to effectively remove indents from an inline-block :

    Option 1

    In the markup we remove the carry for the buttons.

     <main> <button>Кнопка</button><button>Кнопка</button><button>Кнопка</button> </main>

    Option 2

    Parent font-size: 0; and already to the button we set the desired font size.

     main { font-size: 0; } button { font-size: 14px; }

    Option 3

    You can comment out the end and the beginning of the line.

     <main><!-- --><button>Кнопка</button><!-- --><button>Кнопка</button><!-- --><button>Кнопка</button><!-- --></main>