图像周围的空白区域答案

【问题标题】：White space around image图像周围的空白区域
【发布时间】：2009-04-14 12:06:46
【问题描述】：

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

目前我已经在 CSS 中：

.image {
  float:left
}

和视图：

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

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

如果我在图像中添加margin-right，那么文本将简单地从图像下方开始。

【问题讨论】：

标签： html ruby-on-rails css

【解决方案1】：

在这种情况下添加右边距应该可以工作，但我之前遇到过边距和浮动问题，尤其是在处理负边距时，但您也遇到了边距折叠的问题。这可能是也可能不是您想要的行为。通常我最终会防御性地将浮动内容包含在 div 中并使用填充代替，因为结果往往更直观。

此外，IE7 不处理大于内容宽度的负边距，因此在这种情况下您必须使用封闭元素。这是example of that technique。

【讨论】：

在对浮动元素应用边距时还要注意双边距错误。当然，前提是你支持 IE6。

【解决方案2】：

.image {
  padding-right: 10px
}

【讨论】：

【解决方案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>

这不起作用，因为图像大小 + 图像边距 + otherText 宽度 > parentDiv 宽度。它将导致文本转到下一行：

.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;
}

【讨论】：

【解决方案4】：

添加任一：

margin-left 或 padding-left 到文本，或
图片的margin-right或padding-right

如果没有看到你的 CSS / XHTML，很难说什么会更好。

【讨论】：

【解决方案5】：

为图像添加边距。

.imageclass
{
  margin-right: 3px;
}

【讨论】：

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

【解决方案6】：

昨天刚碰到这个。如果您打算在图像周围使用边框，请务必使用边距属性而不是填充，否则您会在图像边框和图像本身之间出现空白。

【讨论】：