Can't remove space from top of the div - html

Question

I have one div inside that i have one label. But I am getting some space above the div. I can't remove that space any how.
Don't know what happens there.
Question: Why I am getting that space above div? How can I remove that space?
My code:
For display issue proper I had put color and border.
* {
padding: 0;
margin: 0;
}
body {
background: green;
}
label {
border: 1px solid black;
font-size: 10px;
}
<div>
<label>Some text</label>
</div>
I have tried many things but, didn't get any solution.

Answer 1

label is a inline element therefore add display:inline-block/block or 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>

Answer 2

Try to add vertical-align: top; for your label
* {
padding: 0;
margin: 0;
}
body {
background: green;
}
label {
vertical-align: top;
border: 1px solid black;
font-size: 10px;
}
<div>
<label>Some text</label>
</div>

Answer 3

This behaviour is caused because the div element has a browser-dependent default size applied to it. When it contains an element with a smaller font-size, the contained element will be placed on the baseline of the div which results in the space. To solve it, add a matching font size to the div:
div {
font-size: 10px;
}

Answer 4

It is coming because of the default line-height of the labels. You need to use reset.css or similar (like normalize.css) to clear the browsers default styling.
Here are some helpful reference, download and simply add them above your style sheet.
http://meyerweb.com/eric/tools/css/reset/reset.css
or
https://necolas.github.io/normalize.css/3.0.3/normalize.css

Answer 5

Looks like the line-height in the div is too high.
This does the trick:
div {
line-height: 10px;
}
(Of course you should reference the div with a class or id).

Answer 6

Inline element like span also behaves the same.
Add a float:left for the label
* {
padding: 0;
margin: 0;
}
body {
background: green;
}
label {
border: 1px solid black;
font-size: 10px;
float: left;
}
<div>
<label>Some text</label>
</div>