html - 当图片向左对齐时，如何在 HTML 中的图片和表格之间放置空格？

Question

我想在我的图片和桌子之间放一个空格，但不知道怎么做。

这是我的代码..

<img src="images/hotel_gracia.jpg" width="200" height="150" align="left"/>
<table class="hotel">
<tr>
<th>Room with Breakfast (P.P)</th>
<th>Superior</th>
<th>Economy</th>
</tr>
<td>12th April-16th April & 5th October-23rd October 2011</td>
<td>42 Euros</td>
<td>37 Euros</td>
</tr>
<tr>
<td>26th April-1st June 2011 </td>
<td>50 Euros</td>
<td>42 Euros</td>
</tr>
<tr>
<td>6th Apr-11th Apr, 17th Apr-25th Apr
2nd Jun-17th Jul & 12th Sept-4th Oct 2011
</td>
<td>55 Euros</td>
<td>45 Euros</td>
</tr>
<td>18th July-11th September 2011</td>
<td>59 Euros</td>
<td>50 Euros</td>
</tr>
</table>

目前这张桌子就在图片旁边，我想在它们之间留一点空间。

我用过“nbsp;” 之前，但不确定我把它放在哪里。

Answer 1

只需更改标签的内联样式即可。如下更改。

<img style="margin-right:10px; border:6px double #545565";

Answer 2

你应该了解 CSS 盒子模型：

<img style="margin-right:20px"

注意：大多数人会推荐一个 css 类来保留样式。

Answer 3

用分号分隔多个样式设置：

<img style="margin-right:10px; border: 6px double #545565" 
src="images/hotel_idania.jpg" width="200" height="150" align="left"/>

尽管您可能想要margin-bottom代替，margin-right因为表格是块元素，默认情况下不会与您的图像出现在同一行。

Answer 4

<img style="margin-right:10px; border:6px double #545565"
    src = "images/hotel_idania.jpg" width="200" height="150" align="left"/>