为何设置display:inline-block的label元素会从新行开始？

嘿，我来帮你拆解这个问题！首先咱们得先纠正一个小误解：默认情况下，display: inline和display: inline-block在未设置宽高、内外边距时，并不会总是表现完全相同——不过你遇到的这个换行问题，其实是HTML标签书写错误导致的！

咱们先看你的代码里的核心问题：
你在第一个<label>后面写了一个<div>（而不是闭合的</div>），第二个<label>后面同样错写了<div>而非</div>。浏览器在解析错误的HTML时会自动补全标签，这直接打乱了你的DOM结构——第一个<label>后面的错误<div>作为块级元素，会强制触发换行，而你误以为是inline-block的锅。

先把代码修正成正确的结构：

<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>

修正后你会发现，inline-block的label和input是在同一行的，和inline表现一致——这才是它们正常的行为。

再补充下inline和inline-block的核心差异（避免以后踩坑）：

• inline元素：不能设置宽高，会随着文本流自动换行，不会在前后产生换行，内部的块级元素可能会破坏布局。
• inline-block元素：可以设置宽高，不会独占一行（和inline一样），但会保持自己的块级上下文，内部元素不会影响外部布局，也不会被外部的文本流随意拆分。

总结一下：你遇到的换行问题是HTML标签未正确闭合导致的浏览器异常渲染，不是inline-block本身的特性哦！

内容的提问来源于stack exchange，提问作者nik