排队img和div css

Question

我正在尝试将<img>与div对齐，但似乎<img>中有一些边距/填充。

这是我试过的：

＆＃13;

＆＃13;

.Box {
  display: inline-block;
}

.myDiv {
  background: blue;
  width: 100px;
  color: white;
}

img {
  margin: 0px !important;
  padding: 0px !important;
  width: 100px;
  height: 100px;
  background: red;
}

＆＃13;

<div class="Box">
  <div class="myDiv">
    Content
  </div>
</div>
<div class="Box">
  <img src="https://i.ytimg.com/vi/2VLDkNjAUBU/maxresdefault.jpg">
</div>

＆＃13;

＆＃13;

＆＃13;

我希望它看起来像这样：

Answer 1

内联元素的默认垂直对齐方式是基线，所以你需要像bottom这样的东西，并且还要删除你的盒子div上的高度（除非你想要100px高，你的示例图像没有显示）：

vertical-align: bottom;

示例：

.Box {
  display: inline-block;
}

.myDiv {
  background: blue;
  width: 100px;
  color: white;
}

img {
  margin: 0px !important;
  padding: 0px !important;
  width: 100px;
  height: 100px;
  background: red;
  vertical-align: bottom;
}

<div class="Box">
  <div class="myDiv">
    Content
  </div>
</div>
<div class="Box">
  <img src="https://i.ytimg.com/vi/2VLDkNjAUBU/maxresdefault.jpg" />
</div>