將填充應用於圖像後邊框留下空間

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