Cómo aplicar estilo a una imagen con CSS

Usa CSS para presentar las imágenes de tu web de la mejor forma. Aprenderás dónde colocar una imagen y si incluir decoraciones como bordes.

Flotar y centrar

Paso 1

Inserta tu imagen en la página con tu método habitual. No olvides incluir texto alt adecuado.

Paso 2

Para que el texto envuelva la imagen a la derecha, como en la foto de introducción, usa una regla CSS así:

img { float: left; padding-right: 1em; }

float:left mueve la imagen al margen izquierdo. padding-right evita que el texto choque contra el lado derecho. Si se añade borde, el padding queda entre imagen y borde. Ver Sección 2 para imagen con borde.

Paso 3

Para que el texto envuelva a la izquierda, flota la imagen a la derecha:

img { float: right; padding-left: 1em; }

Paso 4

Para centrar una imagen, primero convierte el elemento inline normal en elemento de nivel bloque:

img { display: block; }

Paso 5

Luego añade márgenes izquierdo y derecho para centrarla. El valor correcto para centrar es auto:

img { display: block; margin-right: auto; margin-left: auto; }

Bordes y márgenes

Paso 1

Los bordes pueden crear efecto sombra o apariencia de marco. Para borde grueso tipo marco con estilo groove:

img { float: left; border-width: 1em; border-style: groove; border-color: #000000; }

Otros estilos: solid, dotted, dashed, double, ridge, inset, outset. Ancho en píxeles, ems o porcentajes.

Paso 2

Los bordes pueden aplicarse selectivamente a arriba, derecha, abajo, izquierda. Úsalo para crear efecto sombra.

Paso 3

Usando borde sólido en 2 tonos de gris solo en derecha y abajo, consigues efecto sombra:

img { float: left; border-right-style: solid; border-right-color: #CCCCCC; border-bottom-style: solid; border-bottom-color: #999999; }

Paso 4

El margen está fuera del borde. Añadir margen derecha y abajo evita que el texto choque:

img { float: left; border-right-style: solid; border-right-width: 8px; border-right-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 8px; border-bottom-color: #999999; margin-right: 1em; margin-bottom: 1em; }

Consejo

Si tienes imágenes en más de una división (div) de una página, usa selectores descendientes para estilizarlas individualmente. Selectores posibles: #content img, #sidebar img, #feature img.