2017-04-02 86 views
1

我一直在試圖製作一個小遊戲,我遇到了一個錯誤。如何擺脫這些圖像上的額外填充?

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>

正如你可以在上面看到,圖像依然有填充,即使我設置了margin和padding爲0(我只是意識到,因爲它們是在沒有加載圖像局部的。它是白色的只是一個32×32的圖像。)

lel

+0

的可能的複製【如何去掉inline-block的元素之間的空間?(http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between -inline-block-elements) – Siguza

+0

不要這樣想。我可能不正確,但這些圖像只是塊,而不是內聯。 – TheVoidChaos

+0

就定位而言,這是一回事。 – Siguza

回答

2

快速伎倆

電路板上設置font-size:0

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

片段

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>

0

使用float property。在你的css中使用float:right會使空白消失會更好。請試試

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