How do I get rid of the extra padding on these images?

Question

I have been trying to make a small game, where I ran into a error.

body{
  font-family: 'Raleway', sans-serif;
  margin: 0;
}

#title{
  text-align: center;
  font-size: 96px;
  margin-bottom: 5px;
}

.boardpic{
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
}

#board{
  background-color: black;
  padding: 3px;
  width: 512px;
  height: 512px;
}

<html>
  <head>
    <title>
      Drawify | 0.0.1
    </title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet">
  </head>
  <body>
    <h1 id="title">
      Drawify
    </h1>
    <div id="container">
      <div id="board">
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
      </div>
      <div id="colorpicker">
      </div>
    </div>
    <script src="code.js">
    </script>
  </body>
</html>

As you can see above, the images still have padding, even though I set their margin and padding to 0. (I just realized that the images don't load as they are local. It is just a 32x32 image of white.)

Possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Siguza, Apr 02 '17 at 02:21
Don't think so. I might be incorrect, but these images are only blocks, not inline. — TheVoidChaos, Apr 02 '17 at 02:25

score 2 · Accepted Answer · answered Apr 02 '17 at 02:36

Quick trick

set a font-size:0 on the board

#board{
  background-color: black;
  padding: 3px;
  width: 512px;
  height: 512px;
  font-size:0
}

Snippet

body{
  font-family: 'Raleway', sans-serif;
  margin: 0;
}

#title{
  text-align: center;
  font-size: 96px;
  margin-bottom: 5px;
}

.boardpic{
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
}

#board{
  background-color: black;
  padding: 3px;
  width: 512px;
  height: 512px;
  font-size:0;
}

<html>
  <head>
    <title>
      Drawify | 0.0.1
    </title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet">
  </head>
  <body>
    <h1 id="title">
      Drawify
    </h1>
    <div id="container">
      <div id="board">
        <div class="line">
          <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
  <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
  <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
      </div>
      <div id="colorpicker">
      </div>
    </div>
    <script src="code.js">
    </script>
  </body>
</html>

score 0 · Answer 2 · answered Apr 02 '17 at 02:37

0

Use float property. It will be better to use a float:right in your css to make the white spaces go away. Please have a try

.boardpic{
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  float:right;
}

answered Apr 02 '17 at 02:37

Vikash Mishra

349
3
18

How do I get rid of the extra padding on these images?

2 Answers2