<img src="/test.png" style="margin-top:20px;margin-left:20px" title="Hello" border="1" height="100" width="110" />
<span style="text-shadow: 1px 1px 17px #347235;margin-left:20px;margin-top:-20px">Test span</span>
发生的情况是图像已显示,但根据 margin-left:20px 在图像的右侧打印了“测试跨度”消息,但 margin-top 没有执行任何操作,如标签所示朝向图像的底部。我希望它显示在顶部,就像图像出现一样,但标签显示在底部。
您可以在这里看到它:http://jsfiddle.net/AMWjH/
请帮忙
最佳答案
您可以更改垂直对齐属性来更改元素的显示方式。我认为对图像应用 vertical-align: top
可以解决您的问题:
预览:http://jsfiddle.net/Wexcode/AMWjH/23/
此外,margin-top 和 margin-bottom 不影响 span 元素的原因是因为 span 是内联元素。您可以将其更改为 inline-block 或 block 来应用此边距(将其更改为 block 将覆盖vertical-align)。
关于html - margin 首要问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8440602/