为什么跨度超过底部对齐，我该如何操作

Question

请向我解释为什么发生这种情况-为什么跨度的文本超出图像的底部对齐-以及我如何实际操纵跨度以在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> 

Answer 2

实际上，您可以将span位置设置为绝对位置，然后通过边距属性控制x和y坐标。 确保cnt的位置是relative ，这是您创建的任何元素的默认位置。

例如：

 html,body,.cnt,img,span { margin: 0; padding: 0; } .cnt { width: 300px; border: 1px solid #777; position: relative; /* It is the default value */ } .cnt img { background: #090; } .cnt span { background: #333; margin-top: 15px; margin-left: 15px; position: absolute; /* span position is absolute to the div position */ } 

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

https://jsfiddle.net/Lgyw4co2/