javascript - 如何避免用 JS 显示的图片出现不必要的行距？

Question

我有一个问题。我一直在开发一款新的 JS 游戏，但才刚刚开始，我就遇到了一个障碍:

var block = new Array(35);
var blockdata = new Array(35);
var count = 0;
var rand = 0;

while (count <= 35) {
  rand = Math.floor((Math.random() * 3) + 1);
  if (rand == 1) {
    block[count] = "images/t.jpg";
  } else {
    block[count] = "images/g.jpg";
  }
  count++;
}

count = 0;

while (count <= 35) {
  blockdata[count] = document.createElement("IMG");
  blockdata[count].setAttribute("src", block[count]);
  blockdata[count].position = "relative";
  document.body.appendChild(blockdata[count]);

  //inneficient code below XD
  if (count == 5) {
    var mybr = document.createElement('br');
    document.body.appendChild(mybr);
  }
  if (count == 11) {
    var mybr = document.createElement('br');
    document.body.appendChild(mybr);
  }
  if (count == 17) {
    var mybr = document.createElement('br');
    document.body.appendChild(mybr);
  }
  if (count == 23) {
    var mybr = document.createElement('br');
    document.body.appendChild(mybr);
  }
  if (count == 29) {
    var mybr = document.createElement('br');
    document.body.appendChild(mybr);
  }

  count++;
}

#content {
  line-height: 10px;
}

<script type="text/javascript" src="http://gc.kis.scr.kaspersky-labs.com/AA4B3110-75F6-C945-9AFA-B001BE396F4E/main.js" charset="UTF-8"></script>

<div id="content">

游戏运行可见here

图像(t.jpg、g.jpg)被排成一行。我不希望行之间有很小的空间，您可以从上面的 URL 中看到这一点。

我尝试使用 CSS 让它工作，但它不会。

感谢您的帮助!

Answer 1

图像元素默认是行内 block (display: inline-block)。这会在底部添加此边距。您可以添加 margin-bottom: -4px到 img，或者你可以让它显示: block ，但这会破坏你的布局，你将需要使用 float: left在图像上或使用其他一些 css，如 display: flex在图像父级上。

然后 ofc，删除 <br>