圖像周圍的空白

我對左側已經浮動的圖像有一些文字。但文字正好對着圖像的邊界。我如何在它周圍創造一些空白空間？圖像周圍的空白

目前我已經在CSS中得到：

.image { 
    float:left 
}

和視圖：

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

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

如果我添加一個margin-right的形象，那麼文本將簡單地從下開始圖片。

來源

2009-04-14 alamodey

.image { 
    padding-right: 10px 
}

來源

2009-04-21 23:00:56 jonty

爲圖像添加邊距。

.imageclass 
{ 
    margin-right: 3px; 
}

來源

2009-04-14 12:07:58 cjk

出於某種原因導致文本清除並進入圖像下。 – alamodey 2009-04-14 12:11:00

你能發表一些代碼嗎？ – 2009-04-14 12:14:49

添加兩種：

利潤率左或填充左的文字，或
保證金右或填充，右圖像

這很難說沒有看到你的CSS/XHTML什麼會更好。

來源

2009-04-14 12:14:56 WhatIsHeDoing

在這種情況下添加邊距右邊應該可以工作，但我之前有過邊距和浮動問題，特別是在處理負邊距時，但您也有折邊邊距問題。這可能是也可能不是你想要的行爲。我經常以防禦性方式將浮動內容封裝在div中，並使用填充來代替結果，因爲結果往往更直觀。

此外，IE7不處理大於內容寬度的負邊距，因此您必須在該情況下使用包含元素。這是一個example of that technique。

來源

2009-04-14 12:20:24 cletus

在將浮動元素應用邊距時，請小心處理雙倍保證金錯誤。這就是如果你支持IE6，當然。 – ozan 2009-04-14 12:33:35

如果爲圖像添加一個邊距右側使文本顯示在底部，則需要增加父容器的大小。

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

來源

2009-04-14 15:06:13

恰好碰到了這個昨天。如果您打算在圖像周圍使用邊框，請務必使用邊距屬性而不是填充，否則您會在圖像邊界和圖像本身之間留出空白。

來源

2009-04-14 15:20:04

圖像周圍的空白

回答

相關問題