Espacio en blanco alrededor de la imagen

Question

Tengo un texto alrededor de una imagen que se ha flotado a la izquierda. Pero el texto va directo al borde de la imagen. ¿Cómo hago algo de espacio en blanco a su alrededor?

Por el momento tengo en el CSS:

.image { 
    float:left 
} 

y la vista:

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

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

Si añado un margin-right a la imagen, a continuación, el texto simplemente se iniciará de debajo la imagen.

Answer 1

.image { 
    padding-right: 10px 
} 

Answer 2

Agregue un margen-derecho a la imagen.

.imageclass 
{ 
    margin-right: 3px; 
} 

Answer 3

Añadir bien:

• margen izquierda o hacia la izquierda relleno para el texto, o
• margen derecha o padding-derecho de la imagen

Es difícil di lo que sería mejor sin ver tu CSS/XHTML.

Answer 4

Agregar un margen-derecho debería funcionar en este caso, pero he tenido problemas con los márgenes y flotantes antes, especialmente cuando se trata de márgenes negativos, pero también tiene problemas con el colapso de los márgenes. Ese puede o no ser el comportamiento que deseas. A menudo he terminado protegiendo el contenido flotante en un div y usando el relleno, ya que los resultados tienden a ser más intuitivos.

También IE7 no maneja márgenes negativos mayores que el ancho del contenido, por lo que debe usar elementos adjuntos en ese caso. Aquí hay un example of that technique.

Answer 5

Si agrega un margen derecho a la imagen hace que el texto simplemente aparezca debajo, entonces necesita aumentar el tamaño del contenedor principal.

Si el ancho total de los 2 componentes es mayor que el tamaño del contenedor principal, uno de ellos pasa a la siguiente línea.

Ejemplos de código en

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

esto no funcionará porque el tamaño de imagen + imagen + ancho margen otherText> Ancho parentDiv. Esto causará texto para ir a la siguiente línea:

.parentDiv 
{ 
    width: 500px; 
} 

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

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

esto funcionará:

.parentDiv 
{ 
    width: 510px; 
} 

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

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

Answer 6

acabo de encontrar con esto ayer. Si planea usar un borde alrededor de la imagen, asegúrese de usar las propiedades de margen en lugar de relleno, o terminará con espacios en blanco entre el borde de la imagen y la imagen misma.