JavaScript 改变了我的 CSS

Question

我的 html 中有一些 div 框，它们的格式是我想要的。

每当我使用 JavaScript 更改其中一个框的值时，它会更改格式。

这是为什么呢？我如何防止它这样做？

document.getElementById("0").innerHTML = 20;

body {
  background-color: red;
  width: 1000px;
  margin: 10px;
}
#top {
  display: block;
  width: 200px;
  height: 100px;
}
#bottom {
  display: block;
  width: 200px;
  height: 100px;
}
.box {
  height: 94px;
  width: 96px;
  border: 1px solid white;
  display: inline-block;
}

<div id="board">
  <div class="row" id="top">
    <div class="box" id="0"></div>
    <div class="box" id="1"></div>
  </div>
  <div class="row" id="bottom">
    <div class="box" id="2"></div>
    <div class="box" id="3"></div>
  </div>
</div>

这是我的 JSFiddle:

https://jsfiddle.net/pb4759jh68/arbsws5u/

在我的 fiddle 中，我的 JavaScript 语句处于事件状态，您可以将其注释掉以查看它对我的格式有何影响。

谢谢!!!

Answer 1

其实不是JS，而是添加内容所致。它们一开始是对齐的，因为没有内容，但是一旦您添加了内容，它就会尝试将文本与下一个 block 的底部对齐。您可以通过设置避免这种情况:

vertical-align:top; 

到盒子类。