html - 为什么 span 超出底部对齐，我该如何操作它

Question

请向我解释为什么会发生这种情况 - 为什么 span 的文本对齐超出 图像的底部 - 以及我如何实际操纵 span 以在 x 和 y 坐标中移动它，因为用 padding 和 margin 操作它不起作用。我最终可以让它工作，但必须有一些简单的方法来做到这一点。

HTML:

<div class="cnt">
  <img src="http://ecx.images-amazon.com/images/I/41jlGA2RzmL._SS40_.jpg"><span>zzz</span>
</div>

CSS:

html,body,.cnt,img,span {
  margin: 0;
  padding: 0;
}
.cnt {
  width: 300px;
  border: 1px solid #777;
}
.cnt img {
  background: #090;
}
.cnt span {
  margin-top:-20px;
  background: #333;
}

https://jsfiddle.net/kcepLrhx/

Answer 1

img 的默认vertical-align 是在基线对齐。 https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

要更改它，请更改 img 上的 vertical-align

html,body,.cnt,img,span {
  margin: 0;
  padding: 0;
}
.cnt {
  width: 300px;
  border: 1px solid #777;
}
.cnt img {
  background: #090;
  vertical-align: middle;
}
.cnt span {
  margin-top:-20px;
  background: #333;
  
}

<div class="cnt">
  <img src="http://ecx.images-amazon.com/images/I/41jlGA2RzmL._SS40_.jpg"><span>zzz</span>
</div>