Question

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

图像显示但图像右侧的“测试范围”消息根据边距左侧打印：20px但边缘顶部没有做任何事情，因为标签显示朝着图像的底部。我希望它显示在顶部，就像图像出现但标签显示在底部。

您可以在此处看到：http://jsfiddle.net/AMWjH/

请帮忙

Answer 1

您可以更改vertical-align属性以更改元素的显示方式。我认为将vertical-align: top应用于图片可以解决您的问题：

预览：http://jsfiddle.net/Wexcode/AMWjH/23/

此外，margin-top和margin-bottom不影响span元素的原因是span是一个内联元素。您可以将其更改为内联块或块以应用此边距（将其更改为块将覆盖垂直对齐）。

Answer 2

我不确定你要求的是什么，但听起来你希望标题位于图像的右侧，但与顶部对齐。我理解这个问题了吗？试试这个：

HTML：

<div class="titledImage">
    <img src="/test.png" title="Hello" width="110" height="100" />
    <p>The Title</p>
</div>

CSS：

.titledImage img {
    float: left;
}

Answer 3

从我收集的内容中，您想要围绕图像包装文本。您只需要向align标记添加<img>属性：

<div style="padding: 20px;">
<img src="/test.png" style="margin-left:20px; margin-right: 20px;" title="Hello" border="1" height="100" width="110" align="left" />
<span style="text-shadow: 1px 1px 17px #347235;">Test span</span>
</div>

Answer 4

为什么要以这种特殊方式构建代码？在不完全了解您的限制的情况下，我强烈建议您执行以下操作:(当然，请将内联样式放在样式表中）。

<div style="height: 140px; width: 150px;">  
    <p style="text-shadow: 1px 1px 17px #347235; text-align: center;">Test span</p>  
    <img src="http://ressim.net/upload/dce92a76.png" style="padding:0 20px 20px;" title="Hello" border="1" />
</div>

如果能为您解决这个问题，请告诉我。没有理由使用保证金和负利润。在这种特殊情况下，边距或填充可以在图像上起作用。通常，如果可能，请避免使用负边距，并在绝对必要时使用它们。

我希望这会有所帮助。

保证金最重要的问题

4 个答案: