html - 为什么第一个 div 内容会在顶部添加额外的填充/边距？

Question

<div style="background-color: #f6f6f6; white-space: nowrap; padding-bottom: 3px; height: 270px;">
  <div style="display: inline-block; background-color: white; margin-right: 3px; width: 286px; height: 267px;">
    asdf<br />asdsd
  </div><div style="display: inline-block; background-color: white; margin-right: 3px; width: 286px; height: 267px">
  asdf<br />dsasdf<br />asdsd
  </div>
  <div style="display: inline-block; background-color: white; width: 286px; height: 267px">
    asdf<br />dsasdf<br />asdsd
  </div>
</div>

小提琴： https ://jsfiddle.net/mdogancay/gbk350av/

为什么会这样？

标签： htmlcss

Answer 1

这是因为您使用 display: inline-block 为每个 div 添加高度。尝试删除它并为每个 div 添加 float: left 。它会工作 截图