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，则文字只会从图片下方开始。

Answer 1

在这种情况下添加保证金权利应该有效，但我之前遇到过保证金和浮动问题，特别是在处理负边距时，但是你也有崩溃边距的问题。这可能是您想要的行为，也可能不是。通常情况下，我最终会在div中使用填充内容隐藏起来并使用填充，因为结果往往更直观。

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

Answer 2

.image {
  padding-right: 10px
}

Answer 3

如果向图像添加边距权限使文本只显示在下面，则需要增加父容器的大小。

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

上的代码示例

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

这不起作用，因为图像尺寸+图像边距+其他文字宽度＆gt; 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;
}

Answer 4

为图像添加边距权限。

.imageclass
{
  margin-right: 3px;
}

Answer 5

添加：

页边距左边或左边填充，或
margin-right或padding-right to the image

很难说没有看到你的CSS / XHTML会有什么好处。

Answer 6

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

图像周围的白色空间

6 个答案: