Html 图像周围的空白

我有一些文字围绕着一个被向左浮动的图像。但是文本正好贴在图像的边界上。如何在它周围留出一些空白

目前，我已经在CSS中找到了：

.image {
  float:left
}

以及以下观点：

<% if article.newspic.exists? %> 
        <div class ="image">
        <%= newspic_thumbnail_tag(article) %>
        </div>
    <% end %>

  <%= simple_format(article.body) %><br>

---

如果我在图像中添加一个

右边距

，那么文本将从图像下方开始。

在图像中添加右边距

.imageclass
{
  margin-right: 3px;
}

添加：

• 文本左边距或空白处，或
• 图像的右边距或填充

---

在没有看到CSS/XHTML的情况下，很难说什么会更好。

在这种情况下，添加页边距权限应该会起作用，但我以前遇到过页边距和浮动的问题，特别是在处理负页边距时，但也会遇到页边距折叠的问题。这可能是你想要的行为，也可能不是。通常我会将浮动内容防御性地封装在一个div中，并使用填充，因为结果更直观

---

此外，IE7不处理大于内容宽度的负边距，因此在这种情况下必须使用封闭元素。下面是一个示例。

如果在图像右侧添加边距会使文本显示在下方，则需要增加父容器的大小

如果两个组件的总宽度大于父容器的大小，则其中一个将转到下一行

上的代码示例

<div class="parentDiv">
    <div class="image">
        **image here (assume it's 100px wide)**
    </div>
    <div class="otherText">
       **text here**
    </div>
</div>

这将有助于：

.parentDiv
{
    width: 510px;
}

.image
{
    float: left;
    margin-right: 3px;
}

.otherText
{
    float: left;
    width: 400px;
}

---

昨天才碰到这个。如果计划在图像周围使用边框，请确保使用边距属性而不是填充，否则，图像边框和图像本身之间会出现空白。

由于某些原因，会导致文本清除并进入图像下方。另外，在对浮动元素应用边距时，请注意双边距错误。当然，如果你支持IE6的话。

.image {
  padding-right: 10px
}

.image {
  padding-right: 10px
}