图像周围的空白区域

Question

我是一位有用的助手，可以为您进行文本翻译。

我有一些关于图像周围的文字，这些文字已经向左浮动了。但是文本紧贴着图像的边框。我该如何在其周围留出一些空白？

目前在CSS中，我已经使用以下代码：

.image {
  float:left
}

并且视图：

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

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

如果我在图片上添加一个 margin-right，那么文本将会从图片下方开始。

- alamodey

Answer 1

在这种情况下，添加一个margin-right应该可以解决问题，但我之前遇到过边距和浮动的问题，特别是处理负边距时，但你也会遇到折叠边距的问题。那可能是你想要的行为，也可能不是。通常情况下，我会在一个div中防御性地包含浮动内容，并使用padding代替，因为结果更直观。

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

- cletus

---

当为浮动元素应用边距时，要注意双倍边距错误。当然，这是如果您支持IE6的情况下。 - ozan

Answer 2

.image {
  padding-right: 10px
}

- jonty

Answer 3

如果将margin-right添加到图像中使文本只是显示在下面，那么您需要增加父容器的大小。

如果2个组件的总宽度大于父容器的大小，则其中一个会移到下一行。

代码示例请参见：

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

这样做不行，因为图片大小 + 图片边距 + 其他文本宽度 > 父级容器宽度。这会导致文本换行：

.parentDiv
{
    width: 500px;
}

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

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

这个会起作用：

.parentDiv
{
    width: 510px;
}

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

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

- Zack Marrapese

Answer 4

在图像中添加一个 margin-right。

.imageclass
{
  margin-right: 3px;
}

- cjk

---

由于某种原因，导致文本清除并进入图像下方。 - alamodey

Answer 5

添加以下内容之一：

• margin-left或padding-left到文本中，或
• margin-right或padding-right到图像中

没有看到你的CSS / XHTML很难说哪个更好。

- WhatIsHeDoing

Answer 6

昨天刚遇到这个问题。如果您计划在图像周围使用边框，请务必使用 margin 属性而不是 padding，否则您将在图像的边框和图像本身之间留下空白。

- Chris Doggett