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

【问题标题】：How do I put a space between a picture and a table in HTML when the picture is aligned to the left?当图片向左对齐时，如何在 HTML 中的图片和表格之间放置一个空格？
【发布时间】：2011-07-09 19:48:41
【问题描述】：

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

这是我的代码..

<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;”之前，但不确定我把它放在哪里。

【问题讨论】：

标签： html html-table spacing

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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，因为表格是块元素，默认情况下不会与您的图像出现在同一行。

【讨论】：

太棒了，真是一种享受！关于边距，似乎还不错，所以我不确定您的意思。

【解决方案4】：

你应该了解 CSS 盒子模型：

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

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

【讨论】：

我有一个 css 表，我会把它放在 css 还是 html 中？？
如果我想为我的图片添加边框，我可以将它添加到图像样式中吗？？