空白の周りの画像

Question

左に浮かせた画像の周りにテキストがあります。しかし、テキストはイメージの境界線に直面しています。どのように私はそれの周りにいくつかの空白を作るのですか？

.image { 
    float:left 
} 

と眺め：：私はCSSで持っている瞬間

<% 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

追加次のいずれか

• のmargin-leftまたはテキストにパディング左、または
• マージン右またはパディング右の画像に

それはすることは困難ですあなたのCSS/XHTMLを見ずに何が良いだろうと言います。

Answer 4

この場合、margin-rightを追加する必要がありますが、以前は余白や浮動小数点に関する問題がありました。特に負の余白を扱う場合は、余白に問題があります。それはあなたが望むふるまいかもしれません。多くの場合、浮動小数点型のコンテンツをdivに包囲し、代わりにパディングを使用すると、結果がより直感的になる傾向があります。

また、IE7ではコンテンツの幅よりも大きな負のマージンが処理されないため、その場合は囲み要素を使用する必要があります。ここにはexample of that techniqueがあります。

Answer 5

画像にmargin-rightを追加すると、テキストが単純に下に表示される場合は、親コンテナのサイズを大きくする必要があります。

2つのコンポーネントの合計幅が親コンテナのサイズより大きい場合、その1つは次の行に移動します。

<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

はちょうどこの昨日に走りました。画像の周りに枠線を使用する場合は、余白の代わりに余白プロパティを使用するか、画像の境界と画像自体の間に空白を入れてください。