排队img和div css

Question

我试图<img>与div 排队,但似乎有一些边距/填充<img>.

这是我试过的:

.Box {
  display: inline-block;
}

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

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

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

我希望它看起来像这样:

Answer 1

内联元素的默认垂直对齐方式是底线,所以你要喜欢的东西,而不是底部,也去掉高度上的箱格(除非你想它像素,高100,你的示例图像不显示):

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>