CODEWITHSUNDEEP
htmlcss
ketan
ketan

Reputation: 19351

Can't remove space from top of the div

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

Answers (6)

Nukul Ghosh
Nukul Ghosh

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

dippas
dippas

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

Felix A J
Felix A J

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

str
str

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

Leventix
Leventix

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

Rahul Tripathi
Rahul Tripathi

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

Related Questions