html - 无法从 div 顶部删除空间

Question

我有一个 div 里面有一个 label。但是我在 div 上方得到了一些空间。我无法删除那个空间。

不知道那里发生了什么。

问题:为什么我在 div 上方得到那个空间？我怎样才能删除那个空间？

我的代码:

为了正确显示问题，我放置了 color 和 border。

* {
  padding: 0;
  margin: 0;
}

body {
  background: green;
}

label {
  border: 1px solid black;
  font-size: 10px;
}

<div>
  <label>Some text</label>
</div>

我尝试了很多方法，但没有得到任何解决方案。

Answer 1

label 是内联元素，因此添加 display:inline-block/block 或 vertical-align:top

* {
  padding: 0;
  margin: 0;
}
div {
  font-size: 0;
  /* fix inline-block gap - not needed when using block only*/
  background: red
}
label {
  border: 1px solid black;
  font-size: 10px;
}
.l1 {
  display: inline-block
}
.l2 {
  display: block;
  width: 9%
}
.l3 {
  vertical-align: top;
}

<div>
  <label class="l1">Some text</label>
</div>

<div>
  <label class="l2">Some text 2</label>
</div>

<div>
  <label class="l3">Some text 3</label>
</div>