Javascript 物品放入后，Div的大小增加

我正在用可以放在适当位置的碎片制作一个拼图。div（放置图像的空占位符）和图像片段的大小相同。但是，将图像放入div后，div突然变大，使高度增加约5px。关于这可能是什么原因的任何建议？提前谢谢

JS:

PHP:

}

---

如果没有一个bug的例子，很难说问题出在哪里，但可能是图像造成的，因为它们实际上没有“浮动”容器

---

尝试向它们添加float:leftcss属性，看看这是否有帮助

谢谢。与本帖相关，您知道如何防止将img放入已包含img的单元格中吗？这个问题可能会对您有所帮助-

function allowDrop(ev){
    ev.preventDefault();
}

function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

<div id="mMiddle">
  <table class="pixTable">
    <?php
    for($index = '1'; $index <= '16'; $index++){
        if($index == '1')
            echo "<tr class='picRow'>
                <td class='droppable pixCell' id='pixCell".$index."'
                ondrop='drop(event)' ondragover='allowDrop(event)'>
                </td>";
        else{
            if($index % '4' == '0')
                echo "<td class='droppable pixCell' id='pixCell".$index."'
                    ondrop='drop(event)' ondragover='allowDrop(event)'>
                    </td></tr>";
            else if($index % '4' == '1')
                echo "<tr class='picRow'>
                    <td class='droppable pixCell' id='pixCell".$index."'
                    ondrop='drop(event)' ondragover='allowDrop(event)'>
                    </td>";
            else
                echo "<td class='droppable pixCell' id='pixCell".$index."'
                    ondrop='drop(event)' ondragover='allowDrop(event)'>
                    </td>";
        }
    } 
    ?>
  </table>
</div>
<div id="mRight">
    <div class="pixTable droppable" ondrop='drop(event)' ondragover='allowDrop(event)'>
        <?php
        for($index = '1'; $index <= '16'; $index++){
            if($index % '4' == '0')
                echo "<img class='draggable' id='mj".$index."' 
                    src='images/task3/mj".$index.".PNG'
                    draggable='true' ondragstart='drag(event)'><br>";
            else
                echo "<img class='draggable' id='mj".$index."' 
                    src='images/task3/mj".$index.".PNG'
                    draggable='true' ondragstart='drag(event)'>";
        } 
        ?>
    </div>
</div>

.pixCell{
width: 99px;
height: 81px;
padding: 0;
margin: 0;
border: 2px solid black;
background: white;

.pixTable{
    width: 396px;
    height: 326px;
    border-collapse:collapse;
    border-spacing: 0px;
    background: white;
    float: left;
}

.pixImg, .draggable{
    width: 99px;
    height: 81px;
}