label with display:inline-block starts from next line

Question

As we know display: inline and display:inline-block give same results when particular CSS properties (padding, width, margin etc..) are not defined

so if I use only display: inline-block on label element It should give me similar results as it gives me with display: inline

<div>
<input type="checkbox" value=1 name ="h"><label style="display:inline-block;">rekjhnfkjjjjjjjjjgr fnerkjgkjnkreger gherheru hgir ghoerg oerjg oejrg oerjg oejg ooijer gioerug jerg oerjg eoguj oejg orejg oire ghor tor tgjoirj goih roghori hgorhgo iherog horeh goer ghoeri ghoierh goiehr ge roigh oerig oierg oeh goie gioerh goir oigh rioh goirhgioh roighoir hfgoihroigh oirthfiog hoifhgoirhtiog iohgoihroi ghoirh goid hgioh rioghiofh goihfoihg iohfiogh roidhgoirh oig riohgoirh gohrioh goihftioghfo</label>
<div>

<br>
<br>

<div>
<input type="checkbox" value=1 name ="h"><label style="display:inline;">rekjhnfkjjjjjjjjjgr fnerkjgkjnkreger gherheru hgir ghoerg oerjg oejrg oerjg oejg ooijer gioerug jerg oerjg eoguj oejg orejg oire ghor tor tgjoirj goih roghori hgorhgo iherog horeh goer ghoeri ghoierh goiehr ge roigh oerig oierg oeh goie gioerh goir oigh rioh goirhgioh roighoir hfgoihroigh oirthfiog hoifhgoirhtiog iohgoihroi ghoirh goid hgioh rioghiofh goihfoihg iohfiogh roidhgoirh oig riohgoirh gohrioh goihftioghfo</label>
<div>

But as you can see in snippet if I use "display: inline-block" label element starts from a new line,

Could someone explain the reason behind that?

Answer 1

When you don't set width for inline-block element,it get width equal width of content.

If the width of the content is greater than the space left, then it goes to the next line Otherwise it will stay on the same line with checkbox

Try This:

div:first-child label {
  width: 90%;
  vertical-align: top; <-------For align `label` and `checkbox`
}

div:first-child label {
  width: 90%;
  vertical-align: top;
}

<div>
  <input type="checkbox" value=1 name ="h">
  <label class="x" style="display:inline-block;">rekjhnfkjjjjjjjjjgr fnerkjgkjnkreger gherheru hgir ghoerg oerjg oejrg oerjg oejg ooijer gioerug jerg oerjg eoguj oejg orejg oire ghor tor tgjoirj goih roghori hgorhgo iherog horeh goer ghoeri ghoierh goiehr ge roigh oerig oierg oeh goie gioerh goir oigh rioh goirhgioh roighoir hfgoihroigh oirthfiog hoifhgoirhtiog iohgoihroi ghoirh goid hgioh rioghiofh goihfoihg iohfiogh roidhgoirh oig riohgoirh gohrioh goihftioghfo
  </label>
</div>
<br><br>
<div>
  <input type="checkbox" value=1 name ="h">
  <label style="display:inline;">rekjhnfkjjjjjjjjjgr fnerkjgkjnkreger gherheru hgir ghoerg oerjg oejrg oerjg oejg ooijer gioerug jerg oerjg eoguj oejg orejg oire ghor tor tgjoirj goih roghori hgorhgo iherog horeh goer ghoeri ghoierh goiehr ge roigh oerig oierg oeh goie gioerh goir oigh rioh goirhgioh roighoir hfgoihroigh oirthfiog hoifhgoirhtiog iohgoihroi ghoirh goid hgioh rioghiofh goihfoihg iohfiogh roidhgoirh oig riohgoirh gohrioh goihftioghfo
  </label>
</div>