Biała przestrzeń wokół obrazu

Question

Mam trochę tekstu wokół obrazu, który został przesunięty w lewo. Ale tekst idzie prosto w stronę granicy obrazu. Jak zrobić wokół niego trochę białego miejsca?

W tej chwili mam w CSS:

.image { 
    float:left 
} 

i widok:

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

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

Jeśli dodać margin-right do obrazu, a następnie tekst będzie po prostu zacząć spod Obraz.

Answer 1

.image { 
    padding-right: 10px 
} 

Answer 2

Dodaj margines-prawo do obrazu.

.imageclass 
{ 
    margin-right: 3px; 
} 

Answer 3

Dodaj albo:

• margin-left lub padding-lewo do tekstu lub
• margin-right lub padding-Prawo do wizerunku

Trudno powiedz, co byłoby lepsze bez oglądania twojego CSS/XHTML.

Answer 4

Dodawanie marginesu prawy powinien działać w tym przypadku, ale miałem problemy z marżami i pływaków przed, szczególnie gdy mają do czynienia z ujemnymi marżami, ale masz również problemy ze zwijaniem marginesów. To może być lub nie być zachowanie, które chcesz. Często kończyłem defensywnie zamykając pływającą zawartość w div i używając dopełnienia, ponieważ wyniki są bardziej intuicyjne.

Również IE7 nie obsługuje ujemnych marginesów większych niż szerokość zawartości, więc w takim przypadku należy użyć elementów otaczających. Oto example of that technique.

Answer 5

Jeśli dodanie marginesu do obrazu spowoduje, że tekst pojawi się pod spodem, należy zwiększyć rozmiar kontenera nadrzędnego.

Jeśli całkowita szerokość 2 komponentów jest większa niż rozmiar kontenera macierzystego, jeden z nich przechodzi do następnego wiersza.

przykłady kodu na

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

to nie będzie działać, ponieważ rozmiar obrazu + obraz + otherText margines szerokości> parentDiv szerokości. spowoduje to tekst, aby przejść do następnej linii:

.parentDiv 
{ 
    width: 500px; 
} 

.image 
{ 
    float: left; 
    margin-right: 3px; 
} 

.otherText 
{ 
    float: left; 
    width: 400px; 
} 

to będzie działać:

.parentDiv 
{ 
    width: 510px; 
} 

.image 
{ 
    float: left; 
    margin-right: 3px; 
} 

.otherText 
{ 
    float: left; 
    width: 400px; 
} 

Answer 6

Właśnie wpadł tym wczoraj. Jeśli planujesz użyć obramowania dookoła obrazu, pamiętaj, aby użyć marginesów zamiast wypełnienia, albo skończysz białą spacją między obramowaniem obrazu a samym obrazem.