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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 2

尝试为您的标签添加vertical-align: top;

＆＃13;

* {
  padding: 0;
  margin: 0;
}

body {
  background: green;
}

label {
  vertical-align: top;
  border: 1px solid black;
  font-size: 10px;
}

＆＃13;

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

＆＃13;

Answer 3

导致此行为是因为div元素应用了与浏览器相关的默认大小。当它包含一个字体较小的元素时，包含的元素将被放置在div的基线上，从而产生空间。要解决此问题，请在div：

中添加匹配的字体大小

div {
    font-size: 10px;
}

Answer 4

这是因为标签的默认line-height。您需要使用reset.css或类似内容（例如normalize.css）来清除浏览器的默认样式。

以下是一些有用的参考资料，下载并简单地将它们添加到您的样式表上方。

http://meyerweb.com/eric/tools/css/reset/reset.css

或

https://necolas.github.io/normalize.css/3.0.3/normalize.css

Answer 5

像span这样的内联元素的行为也相同。

为标签添加float：left

* {
  padding: 0;
  margin: 0;
}

body {
  background: green;
}

label {
  border: 1px solid black;
  font-size: 10px;
  float: left;
}

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

Answer 6

line-height中的div看起来太高了。

这就是诀窍：

div {
  line-height: 10px;
}

（当然你应该用类或id来引用div。）

无法从div顶部移除空格

6 个答案: