空div与图像对齐高于div

Question

如下图所示，我的布局有点偏。出于某种原因，当我在边界img内没有div标记时，它会“浮动”。没有css似乎有所不同，使它做到这一点。在检查它时，似乎没有遗漏任何东西或者有任何额外的东西会使它做到这一点。

奇怪的是，当我在其中放入input元素时，它会比图片中的div行低一些。当我在其中加入img时，它的行为正确，与其他人保持一致。

我的HTML：

<div class="row">
  <div class="col-md-12 center-block">
    <div class="border background-choice">
      <img src="background1.jpg">
    </div>
    <div class="border background-choice">
      <img src="background1.jpg">
    </div>
    <div class="border background-choice">
      <img src="background1.jpg">
    </div>
  </div>
  <div class="col-md-12 center-block">
    <div class="border background-choice">
      <img src="background1.jpg">
    </div>
    <div class="border background-choice">
      <img src="background1.jpg">
    </div>
    <div class="border background-choice">
    </div>
  </div>
</div>

我的css（.scss）：

#background-upload-modal {
  .border {
    border: solid 2px black;
  }
  .background-choice {
    margin: 10px;
    height: 150px;
    width: 150px;
    display: inline-block;
    img {
      height: 100%;
      width: 100%;
    }
  }
}

Answer 1

尝试添加

vertical-align: top

到背景选择＆＃39;

.background-choice {
    vertical-align: top
}

这是人们使用显示内联块元素遇到的常见问题，因为默认对齐方式是基线

Answer 2

你需要给你的img一个显示值 -

img {
  height: 100%;
  width: 100%;
  display: block;
}

当img标签没有这种显示类型时，它们是内联的并且表现出这种奇怪的“隐形边缘”问题。