图像下方的额外间距，我该如何删除它？

Question

我有一个div来显示图片，我希望div能够环绕图像，而不会将实际尺寸放在CSS中，这样我就可以使图像尺寸更大/较小的div只是包裹着什么。

这是我的CSS：

.boxart {
    padding:1px;
    background-color: #e3e3e3;
    border: solid 1px #cacaca;
    position: relative;
    display: inline-block;
}
.overImage {
    position: absolute;
    background-color: #fff1ce;
    padding: 3px;
    margin: 2px 0px 0px 60px;
    border: 1px dashed #111111;
}

我的HTML：

<div class="boxart">
  <div class="overImage">Upload Boxart</div><img width="220" height="200" src="img-url" />
</div>

Answer 1

以下两种不同的方法可以删除img下面的空格：

• 将vertical-align的{​​{1}}属性更改为img：

  Example Here

  top

• 或者，您可以将.boxart > img { vertical-align: top; } 的{​​{1}}更改为display。

  Example Here

  img

这两种方法的工作原理如下：

默认情况下，block元素为.boxart > img { display: block; } 。

letters such as f, j, p and q的img元素有保留的空格，超出了其他字母的高度（即，挂得更低/更高的字母......）。通过将inline属性更改为其他而不是默认值inline，将删除空格。通过将元素的vertical-align更改为baseline，display属性不再对元素产生影响，因为它不再是block。

Answer 2

将显示为 inline-flex 用于.boxart

Inline-flex通过缩小或增长来帮助他们的子标签适应父标签空间。