Reputation: 19351
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.
Upvotes: 4
Views: 661
Reputation: 81
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
Upvotes: 0
Reputation: 60603
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>
Upvotes: 4
Reputation: 6490
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>
Upvotes: -1
Reputation: 45039
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;
}
Upvotes: 0
Reputation: 3869
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).
Upvotes: -1
Reputation: 172628
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>
Upvotes: 2