Why does left-padding becomes part of span?

Question

I am creating chinese checkers, I use span tag to create circles. Added only left padding to the top corner. I have two questions:

1) Why rows seem to have distance between them, but not columns.

2) To fix 1) I added padding-left, but instead of adding distance the padding became part of the circle, why?

Here's the link how it looks:

Here's part of code:

    .player0{
            height: 40px;
            width: 40px;
            padding-right: 5px;
            background-color: transparent;
            border-radius: 50%;
            display: inline-block;
        }

    divs += "<span class='player"+fullBoardArr[fullArrIter]+" 'onclick='send()'></span>"
    divs += "<div class='clear_float'> </div>" //for separation of rows

Answer 1

As I said in comments, you need to use margin instead of padding.

I would not use "clear_float" (I assume this is about the float CSS property). Instead wrap elements that belong in the same row, in a separate div element.

From the image you included, it seems that you have a problem in aligning the cells. You can use many ways to solve this, but as your board is symmetric horizontally (ignoring the colors), you can just use text-align: center.

I had some fun in creating JavaScript logic for the board itself. You may find some aspects interesting to reuse:

class Cell {
    constructor(rowId, colId) {
        this._value = 0;
        this.rowId = rowId;
        this.colId = colId;
        this.elem = document.createElement("span");
        this.elem.className = "cell";
        this.selected = false;
    }
    get value() {
        return this._value;
    }
    set value(value) {
        this._value = value;
        this.elem.style.backgroundColor = ["", "grey", "blue", "red"][value];
    }
    toggleSelected() {
        this.selected = !this.selected;
        this.elem.classList.toggle("selected", this.selected);
    }
}

class Board {
    constructor() {
        this._container = document.createElement("div");
        this._container.className = "board";
        this.elemMap = new Map;
        this.grid =   [[0,0,0,0,2,0,0,0,0,0,0,0,0],
                       [0,0,0,0,2,2,0,0,0,0,0,0,0],
                       [0,0,0,0,2,2,2,0,0,0,0,0,0],
                       [0,0,0,0,2,2,2,2,0,0,0,0,0],
                       [3,3,3,3,1,1,1,1,1,4,4,4,4],
                       [0,3,3,3,1,1,1,1,1,1,4,4,4],
                       [0,0,3,3,1,1,1,1,1,1,1,4,4],
                       [0,0,0,3,1,1,1,1,1,1,1,1,4],
                       [0,0,0,0,1,1,1,1,1,1,1,1,1]];
        // create the data structure for the game and produce the corresponding DOM
        this.grid.forEach((row, rowId) => {
            let div = document.createElement("div");
            row.forEach((value, colId) => {
                if (!value--) return;
                let cell = row[colId] = new Cell(rowId, colId);
                cell.value = value;
                div.appendChild(cell.elem);
                this.elemMap.set(cell.elem, cell);
            });
            this._container.appendChild(div);
        });
    }
    set container(elem) {
        elem.appendChild(this._container);
    }
    getEventCell(e) {
        return this.elemMap.get(e.target);
    }
    set selected(cell) {
        if (this._selected) {
            this._selected.toggleSelected();
            this._selected = null;
        }
        if (!cell) return;
        cell.toggleSelected();
        this._selected = cell;
    }
    get selected() {
        return this._selected;
    }
    move(cellFrom, cellTo) {
        // TODO: Implement the real move rules here
        if (!cellFrom.value) return; // must move a piece
        if (cellTo.value) return; // capturing not allowed
        cellTo.value = cellFrom.value;
        cellFrom.value = 0;
        board.selected = null;
    }
}

let container = document.querySelector("#container");
let board = new Board();
board.container = container;
container.addEventListener("click", e => {
    let cell = board.getEventCell(e);
    if (!cell) return; // click was not on a cell
    if (!board.selected || cell.value) {
        board.selected = cell;
    } else {
        board.move(board.selected, cell);
    }
});

.board { 
    text-align: center;
    margin-left: auto; margin-right: auto;
}

.cell {
    height: 15px;
    width: 15px;
    margin: 0px 2px;
    border: 1px solid;
    border-radius: 50%;
    display: inline-block;
}

.selected {
    border-color: orange;
}

<div id="container"></div>

You can click to select a piece and then click again on an empty spot to move it there.

Answer 2

Use margin instead of padding:

.player0{
    height: 40px;
    width: 40px;
    margin-right: 5px;
    background-color: transparent;
    border-radius: 50%;
    display: inline-block;
}

As an easy-to-remember quick reference, margin changes the position starting from outside the element border, padding from the inside