Problema con los espacios.

[eljuank1982]

Buenas a todos, tengo los siguientes div:

Código PHP:

  <div id="imagenarmonia">
</div>
<div id="TextApoImagen"><p>Un párrafo lo suficientemente grande para que le pase por al lado y por abajo a la imagen de la capa "imagenarmonia".
</p>
</div> 
   

El problema es que las dos se ajustan perfectamente dentro de los espacios de un div id="contenido" que los contiene, pero no logro que el texto que bordea el lado derecho del div id="imagenarmonia" mantenga un espacio, o sea me sale pegadísimo a la imagen y sin embargo me da un buen espacio en la parte de abajo de la misma.

Aquí pongo la definición de los estilos en cuestión:

Código PHP:

  #contenido {
    
    padding:20px;
}
#imagenarmonia{
    background-image:url(img/Armonia.jpg);
    background-repeat:no-repeat;
    float:left;
    height: 295px;
    width: 200px;
}
#TextApoImagen{
    text-align:justify;
} 
   

He probado con los márgenes pero se me dan bien en todos los lugares y el texto sigue pegado en el lateral derecho de la imagen.
Salu2 y gracias.

[Shaito]

Hola!

Si quieres que tenga un espacio en el lado derecho, solo tienes que agregar este code:

{
margin-left:10px
}

Modifica los px para que quede a tu gusto


Saludos y espero que te sirva!

[kseso?]

¿margin or padding, qué utilizar?

[Shaito]

Depende Kseo?

Si quiere que la imagen se aleje, que use margin, pero si usas padding, te arriesgas de que la imagen se quede oculta o se distorsione.

Realmente da igual... el resultado es el mismo.

Haz la prueba y como veas tu mejor, que es tu web


Saludos!

[kseso?]

Iniciado por Shaito

Depende Kseo?

Si quiere que la imagen se aleje, que use margin, pero si usas padding, te arriesgas de que la imagen se quede oculta o se distorsione.

¡¿?!
Gracias por su corrección. Ambigua y poco o nada rigurosa. Pero le comparto mi análisis de la duda planteada (parcial en cuanto a datos ofrecidos) y el porqué de mi respuesta:

Hay cuatro elementos (sin contar con el contenedor general): 2 cajas, 1 imagen y 1 párrafo.
El contenedor de la imagen tiene definidas medidas (alto x ancho). Supongo que sus razones tendrá. Cualquier intervención en él o la imagen queda descartada.
Nos queda una segunda caja y el texto.
Yo al menos desconozco qué más habrá en ella. Tampoco los efectos por marcarle un perímetro excluido a #TextApoImagen
Así que de los cuatro sólo queda 1 elemento: el tag /p/

Así que vuelvo a preguntar (que realmente es una indicación para que investigue las dos propiedades):
¿margin o padding?
Yo al menos no tengo toda la información necesaria para indicar que use uno u otro.
¿Usted sí?

[Shaito]

Me precipité al decir una u otra.

Por otra parte, es cierto que soy un diseñador de costumbres, y suelo usar Margin, pues me es más comodo y ofrece a mi padrecer los mismos resultados.

Cierto es también que yo en estos casos, para dar una solución o la que más se adapte al problema.

Como ya has dicho tu, no contamos con más información o una web de vista o una demo del contenido.

Pero, de todos modos, aun siendo un poco "carca" sigo pensando que sería mejor usar margin, puesto a que solo afectaría a ese elemento, al contrario que si se aplica un padding, este debería de hacerse sobre el div o elemento general que contiene los objetos. Y, en algún caso podría romper con la armonía o con la vista del diseño desencuadrandolo o moviendo elementos que el autor no quiere mover.

Por ello, veo como opción más adecuada usar Margin y no Padding.


Saludos

[eljuank1982]

Iniciado por kseso?

¡¿?!
Gracias por su corrección. Ambigua y poco o nada rigurosa. Pero le comparto mi análisis de la duda planteada (parcial en cuanto a datos ofrecidos) y el porqué de mi respuesta:

Hay cuatro elementos (sin contar con el contenedor general): 2 cajas, 1 imagen y 1 párrafo.
El contenedor de la imagen tiene definidas medidas (alto x ancho). Supongo que sus razones tendrá. Cualquier intervención en él o la imagen queda descartada.
Nos queda una segunda caja y el texto.
Yo al menos desconozco qué más habrá en ella. Tampoco los efectos por marcarle un perímetro excluido a #TextApoImagen
Así que de los cuatro sólo queda 1 elemento: el tag /p/

Así que vuelvo a preguntar (que realmente es una indicación para que investigue las dos propiedades):
¿margin o padding?
Yo al menos no tengo toda la información necesaria para indicar que use uno u otro.
¿Usted sí?

Yo finalmente usé el margin debido a que mi modificación era sobre un div, sí no se me había ocurrido tratar de modificar el tag /p/

Salu2
Y Muchas Gracias.