title: label with display:inline-block starts from next line
body: <p>As we know display: inline and display:inline-block give same results when particular CSS properties (padding, width, margin etc..) are not defined</p>
  
  <p>so if I use only display: inline-block on label element It should give me similar results as it gives me with display: inline</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;input type="checkbox" value=1 name ="h"&gt;&lt;label style="display:inline-block;"&gt;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&lt;/label&gt;
  &lt;div&gt;
  
  &lt;br&gt;
  &lt;br&gt;
  
  &lt;div&gt;
  &lt;input type="checkbox" value=1 name ="h"&gt;&lt;label style="display:inline;"&gt;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&lt;/label&gt;
  &lt;div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But as you can see in snippet if I use "display: inline-block" label element starts from a new line,</p>
  
  <p>Could someone explain the reason behind that?</p>