CSS inline-block board alignment

Question

I am trying to build a Sudoku style board with CSS but am having some trouble getting a few of the squares to align. What am I missing ??

CODEPEN

HTML

<div class="middle-box">
  <div class="sudoku">
    <div class="square">
      <input class="tile normal edge-left edge-top">
      <input class="tile normal edge-top">
      <input class="tile normal edge-top">
      <input class="tile normal edge-left">
      <input class="tile normal">
      <input class="tile normal">
      <input class="tile normal edge-left">
      <input class="tile normal">
      <input class="tile normal">
    </div>

CSS:

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #ecf0f1;
background-size: cover;
font-family: "Slabo 27px", serif; }

a {
  text-decoration: none;
  transition: all 0.3s; }

.sudoku {
  width: 460px;
  height: 460px;
  background: #2c3e50;
  border: 20px solid #2c3e50;
  position: absolute;
  left: 0;
  top: 0; }
 ....

Answer 1

Since your inputs are inline-block elements, browser also respects white spaces between them, and since they also occupy some space, you get observed result, when inputs don't fit in row anymore.

The simplest fix is to set font-size: 0 on wrapper container, so that whitespaces effectively become 0-width. This will not affect inputs font-size setting:

.sudoku {
  /* ... */
  font-size: 0;
}

Demo: http://codepen.io/anon/pen/xbwBvG

Answer 2

Here is a perfect sudoku board:

codepen

 html, body { width: 100%; height: 100%; margin: 0; padding: 0; background: #ecf0f1; background-size: cover; font-family: "Slabo 27px", serif; } a { text-decoration: none; transition: all 0.3s; } .sudoku { width: 463px; height: 463px; background: #2c3e50; border: 20px solid #2c3e50; position: absolute; left: 0; top: 0; } .square { width: 153px; height: 153px; display: inline-block; vertical-align: top; background: #8aa4be; margin-right: 1px; margin-bottom: 1px; } .normal { padding: 0; border: none; outline: none; font-family: inherit; } .tile { width: 50px; height: 50px; background: #fff; border-top: 1px solid #8aa4be; border-left: 1px solid #8aa4be; font-size: 20px; text-align: center; color: #ccc; line-height: 50px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; } .edge-left { border-left: 1px solid #2c3e50; } .edge-top { box-shadow: 0 -1px 0 0px #2c3e50; border: none; padding-top: 1px; } .middle-box { position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; margin-top: -250px; margin-left: -250px; } /*# sourceMappingURL=style.css.map */ 

 <div class="middle-box"> <div class="sudoku"> <div class="square"> <input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal"> </div ><div class="square"> <input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal"> </div ><div class="square"> <input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal"> </div ><div class="square"> <input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal"> </div ><div class="square"> <input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal"> </div ><div class="square"> <input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal"> </div ><div class="square"> <input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal"> </div ><div class="square"> <input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal"> </div ><div class="square"> <input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal" ><input class="tile normal"> </div </div> </div> 

Answer 3

display:inline-block; add spaces . if you want to use display:inline-block; then you have to remove all the spaces else use float:left; for .tile class

.tile {
  width: 50px;
  height: 50px;
  background: #fff;
  border-top: 1px solid #8aa4be;
  border-left: 1px solid #8aa4be;
  display: inline-block;
  font-size: 20px;
  text-align: center;
  color: #ccc;
  line-height: 50px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none; 
float:left // added}

html

 <input class="tile normal edge-left edge-top"><input class="tile normal edge-top"><input class="tile normal edge-top"><input class="tile normal edge-left"><input class="tile normal"><input class="tile normal"><input class="tile normal edge-left"><input class="tile normal"><input class="tile normal">

Answer 4

Borders add margin to elements (space on the outside), so the border being on some of the items and not others are causing them to not align. Rather then using and not using borders, simply change the color of the border to transparent when you don't want it to appear.

Answer 5

Check this code

CodePen

.sudoku {
  width: 530px;  //edited
  height: 470px; //edited
. 
.
.
}

.square {
  width: 170px; //edited
  display: inline-block;
  background: #8aa4be; 
  border:1px solid red;
}