图像周围的空白

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

.image { 
    padding-right: 10px 
} 

Answer 2

为图像添加边距。

.imageclass 
{ 
    margin-right: 3px; 
} 

Answer 3

添加两种：

• 利润率左或填充左的文字，或
• 保证金右或填充，右图像

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

Answer 4

在这种情况下添加边距右边应该可以工作，但我之前有过边距和浮动问题，特别是在处理负边距时，但您也有折边边距问题。这可能是也可能不是你想要的行为。我经常以防御性方式将浮动内容封装在div中，并使用填充来代替结果，因为结果往往更直观。

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

Answer 5

如果为图像添加一个边距右侧使文本显示在底部，则需要增加父容器的大小。

如果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; 
} 

Answer 6

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