为什么第一个 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/

为什么会这样？

Answer 1

只需向父/外部 div 添加一个display:flex即可解决填充问题。

 #outer { background-color: #f6f6f6; white-space: nowrap; padding-bottom: 3px; height: 270px; display:flex; } #div1 { display: inline-block; background-color: white; margin-right: 3px; width: 286px; height: 267px; } #div2 { display: inline-block; background-color: white; margin-right: 3px; width: 286px; height: 267px; } #div3 { display: inline-block; background-color: white; width: 286px; height: 267px; }

 <div id="outer"> <div id="div1"> div1-line1<br />div1-line2 </div> <div id="div2"> div2-line1<br />div2-line2<br />div2-line3 </div> <div id="div3"> div3-line1<br />div3-line2<br />div3-line3 </div> </div>

Answer 2

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

Answer 3

因为您在每个 3 div使用inline-block preperty 。 并且与第一个div不同，其他divs有 3 行，并且inline-block属性尝试根据其他divs的行调整第一个div 。要解决此问题，请在第一个div's行的开头使用<br />

如下

<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;">
    <br />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>

或将display: flex属性添加到父div （无需添加额外的<br /> ）

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

Answer 4

这与 HTML 元素的默认“垂直对齐”属性有关。 您可以在此处阅读更多相关信息： https : //css-tricks.com/fighting-the-space-between-inline-block-elements/并在此处查看一些工作示例： https : //dabblet.com/gist/2422174

基本上，如果您将“垂直对齐：顶部”添加到胭脂 div 元素中，应该没问题:)