0

So I am making a sudoku solver using HTML, CSS, and JS.

body {
    margin: 20px;
}

.sudoku-cell {
    display: inline-block;
    width: 50px;
    height: 50px;

    border: 1px solid gray;
    background-color: rgb(238, 238, 238);

    font-size: 40px;
    padding-left: 15px;
}

.sudoku-cell-grp {
    display: inline-block;
    border: 1px solid gray;
}

span {
    line-height: 1.3;
    vertical-align: top;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sudoku Solver - Minisoft</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link href="index.css" rel="stylesheet">
</head>

<body>
    <div class="sudoku-table">
        <div class="sudoku-cell-grp">
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span><br>
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span><br>
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span>
        </div>
        <div class="sudoku-cell-grp">
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span><br>
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span><br>
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span>
        </div>
        <div class="sudoku-cell-grp">
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span><br>
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span><br>
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span>
            <span class="sudoku-cell">1</span>
        </div>
    </div>

    <script src="index.js"></script>
</body>

</html>

As you can see after running the code, I get a horizontal space after the spans. How can I remove this?

The Coding Fox
  • 1,488
  • 1
  • 4
  • 18
  • Add display: flex; to the .sudoku-table class and display: table; to the .sudoku-cell-grp class. – Rizeen Sep 06 '22 at 11:33

0 Answers0