应用填充到图像后边框留空间

Question

我的图片浮动在一段文字的右侧。因此，文本不会运行到我必须填充图像的图像。现在，边框识别填充并在图像和边框之间留下空白区域。

<img src="image.jpg" width="140" height="190" style="float:right; padding-left:10px; border:2px solid black;">

这是一封电子邮件，所以我想保持内联样式。

Answer 1

Google Chrome的Inspect Element Tool提供了一个很好的示例，说明填充和边框如何在DOM上运行。尝试使用：

<img src="image.jpg" width="140" height="190" style="float:right; margin-left:10px; border:2px solid black;">

Answer 2

尝试使用保证金。
阅读箱型：

http://css-tricks.com/the-css-box-model/
http://www.w3.org/TR/CSS2/box.html

Answer 3

如果padding-left: val导致空格，您可以尝试

margin-left: val;

padding是在元素边界内添加的空格，而margins是在元素边界外添加的！

Answer 4

html电子邮件不支持100％的保证金，因此坚持填充。尝试将填充添加到段落而不是图像。 padding-right:30px;会在图片上产生与padding-left:30px;相同的定位。

你应该注意，因为这是html电子邮件，float不适用于所有主要客户端（特别是Outlook），你应该在表元素中使用align="left"。