Почему левый отступ становится частью диапазона?

Question

Я создаю китайские шашки, я использую тег span для создания кругов. Добавлен только левый отступ в верхний угол. У меня два вопроса:

1) Почему строки имеют расстояние между ними, а не столбцы.

2) Чтобы исправить 1) Я добавил padding-left, но вместо добавления расстояния отступ стал частью круга, почему?

Вот ссылка, как это выглядит:

Вот часть кода:

    .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

Как я уже говорил в комментариях, вам нужно использовать margin вместо padding.

Я бы не использовал "clear_float" (я предполагаю, что это свойство float CSS). Вместо этого оберните элементы, принадлежащие одной строке, в отдельный элемент div.

Из изображения, которое вы включили, кажется, что у вас проблема с выравниванием ячеек. Вы можете использовать много способов, чтобы решить эту проблему, но так как ваша доска симметрична c по горизонтали (игнорируя цвета), вы можете просто использовать text-align: center.

Я немного повеселился в создании JavaScript logi c для самой платы. Вы можете найти некоторые аспекты, интересные для повторного использования:

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>

Вы можете щелкнуть, чтобы выбрать кусок, а затем снова щелкнуть пустое место, чтобы переместить его туда.

Answer 2

Используйте margin вместо padding:

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

В качестве простого для запоминания краткого справочника, margin меняет позицию, начиная с снаружи граница элемента, отступ от внутри