将填充应用于图像后边框留下空间

Question

我有一个图像浮动到文本段落的右侧。所以文本不会跑到我必须打印图像的图像上。现在，边框会识别填充并在图像和边框之间留下空白区域。

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

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

Answer 1

谷歌浏览器的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; 

A padding是在元素边界内添加的空间，而margins则添加到元素边界外部！

Answer 4

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

尽管如此，您应该注意，因为这是html电子邮件，float在所有主要客户端（特别是Outlook）中都不起作用，您应该在表格元素中使用align="left"。