html - margin 首要问题

标签 html css

<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/

相关文章:

javascript - 删除或重复非单词字符,例如 HTML 文本区域中的换行符,这些字符会导致 modsecurity 出现错误

javascript - HTML 文本框中仅允许数字和正斜杠

javascript - 将文件从目录获取到 HTML 元素中

c# - 如何在 c# asp html 中制作具有 tiles 样式的树?

php - Jquery - 多级垂直菜单 : can't select last submenu because it dissapears

css - CSS 中元素/标签的顺序是什么

python - 如何将 Dash 布局保存到 HTML 文件

html - 在导航栏上的 Logo 旁边定位链接

javascript - Firefox 喜欢检查元素

javascript - ToggleShow 元素只在这个特定的div中点击显示